How to make a css submenu stay enabled when a subpage is selected
I have a horizontal css menu with a menu / submenu display working on hover, but I would also like the submenu options to persist when I selected this page. The code below shows the submenu on hover, but it disappears on mouse hover. I am having a hard time figuring out how to get my code to work to stay in the submenu? How can i do this?
Thanks for your help.
Here's the HTML:
<ul id="menu_nav">
<li>
<a href="#" class="button">Home</a>
<span>
<a href="#">Home Link1</a>
<a href="#">Home Link2</a>
<a href="#">Home Link3</a>
</span>
</li>
<li>
<a href="#" class="button">About Us</a>
<span>
<a href="#">About Link1</a>
<a href="#">About Link2</a>
<a href="#">About Link3</a>
</span>
</li>
</ul>
Here's the CSS
ul#menu_nav
{
position:relative;
float:left;
width:790px;
padding:0;
margin:0;
list-style-type:none;
background-color:#000099;
}
ul#menu_nav li {float: left;
margin: 0; padding: 0;
border-right: 1px solid #555;}
ul#menu_nav li a.button
{
float:left;
text-decoration:none;
color:white;
background-color:#000099;
padding:0.2em 0.6em;
border-right:1px solid #CCCCCC;
font-family: Tahoma;
font-size: 11px;
font-style: normal;
font-weight: bold;
position: relative;
height: 21px;
line-height:1.85em;
}
ul#menu_nav li a:hover {
background-color:#F7F7F7;
color:#000099;
border-top:1px solid #CCCCCC;
}
ul#menu_nav li span{
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:25px;
display: none; /*--Hide by default--*/
width: 790px;
background: #F7F7F7;
color: #fff;
}
ul#menu_nav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#menu_nav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#menu_nav li span a:hover {text-decoration: underline;}
This is what jquery looks like:
$("ul#menu_nav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9'}); //Add background color and image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
a source to share
Brian, thanks. I basically did something with what you suggested. I already had a class called ".selected" which was used to display the selected tab for the menu. in the "hover" event I put an if statement to check if the class was "selected" in it, if so I just displayed the hidden span tag. "$ (This is) .next () show ();" this is the line that did what I needed for the "click" event to keep the submenu positive. Hope this helps anyone.
See the code:
$("ul#menu_nav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9'}); //Add background color and image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
if( $(this).children("a").is('.selected') )
{
$(this).children("span").show();
}
else
{
$(this).find("span").hide(); //Hide the subnav
}
});
$(".menu_buttons li>a").click(function(){
$(this).addClass('selected').removeClass('button')
.parents().siblings().children("a").removeClass('selected').addClass('button')
.parents().siblings().children("span").hide()
$(this).next().show();
});
a source to share
I'm not really sure what you're trying to do, but I'm sure whatever it is can be achieved by adding a class to what you are trying to get to stay in place, rather than changing its CSS or hiding it. Sort of
$("ul#menu_nav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9'});
$(this).find("span").addClass('keep').show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span:not(keep)").hide(); //Hide the subnav
});
a source to share