Solved

HELP! How do I keep button's hover state "on" when mousing over a dropdown menu?

Posted on 2011-09-28
2
754 Views
Last Modified: 2012-08-14
I want the "on" version of the button to remain on while the user mouses down the menu. off button on button
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sexy Drop Down Menu with CSS &amp; jQuery - Tutorial by Soh Tanaka - www.SohTanaka.com</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){

	$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
	
	$("ul.topnav li span").mouseover(function() { //When trigger is clicked...
		
		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() { 
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});

});
</script>
<style type="text/css">
ul.topnav {
	list-style: none;
	padding: 0 0;	
	margin: 0;
}
ul.topnav li {
	float: left;
	margin: 0;	
	padding: 0 0 0 0;
	position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
	padding: 0;
	color: #000;
	display: block;
	text-decoration: none;
}
ul.topnav li a:hover{
	background: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_hover.gif) no-repeat left top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 235px;
	height: 28px;
	float: left;
	background: url(images/drop-btn-off.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: left top; cursor: pointer;
	background: url(images/drop-btn-on.gif) no-repeat center top;
} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	border: 1px solid #111;
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif) no-repeat 10px center; 
}

</style>

</head>

<body>
        <ul class="topnav">
            <li>
                <a href="#">Resources</a>
                <ul class="subnav">
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                </ul>
            </li>
                    </ul>
  


</body>
</html>

Open in new window

0
Comment
Question by:tekgrl
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 5

Accepted Solution

by:
Neil_Bradley earned 500 total points
ID: 36720712
See code attached. I created a new class called "selected" which contains the same values as your hover state. I then added new java script to call the  "selected" class and add it to the top menu item when you mouseover the drop down nav. I also added a function to make the "selected" class remove itself onmouseout.
Cheers,
N

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sexy Drop Down Menu with CSS &amp; jQuery - Tutorial by Soh Tanaka - www.SohTanaka.com</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
	$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
	
	$("ul.topnav li span").mouseover(function() { //When trigger is clicked...
		
		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() { 
		
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});
	$('ul.subnav').mouseover(function() {
  $("li #top").addClass("selected");
});
	$('ul.subnav').mouseout(function() {
  $("li #top").removeClass("selected");
});

});
</script>
<style type="text/css">
ul.topnav {
	list-style: none;
	padding: 0 0;	
	margin: 0;
}
ul.topnav li {
	float: left;
	margin: 0;	
	padding: 0 0 0 0;
	position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
	padding: 0;
	color: #000;
	display: block;
	text-decoration: none;
}
ul.topnav li a:hover{
	background-image: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_hover.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 235px;
	height: 28px;
	float: left;
	background: url(images/drop-btn-off.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: left top; cursor: pointer;
	background: url(images/drop-btn-on.gif) no-repeat center top;
} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	border: 1px solid #111;
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif) no-repeat 10px center; 
}

.selected {
		background-image: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_hover.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
</style>

</head>

<body>
        <ul class="topnav">
            <li>
                <a href="#" id="top">Resources</a>
              <ul class="subnav">
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                <li><a href="#">Sub Nav Link</a></li>
                </ul>
            </li>
                    </ul>
  


</body>
</html>

Open in new window

0
 

Author Closing Comment

by:tekgrl
ID: 36733405
Beautiful! Thanks so much!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question