Solved

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

Posted on 2011-09-28
2
736 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to show popup no matter what a user clicks on navigation wise 10 64
AngularJS: ng-repeat 25 56
Check if field exists SPUtility 5 48
Javascript Error 10 24
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

752 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