how to make css submenu stay put when subpage has been selected


Tags: css,menu,html-lists

Problem :

I have a css horizontal menu with a menu / submenu display working on the hover, but I would also like to make the submenu options stay put when I've selected that page. The code below shows the submenu on hover, but goes away on mouse out. I'm having some difficulty figuring out how to make my code work to keep the submenu items staying put? 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;}

Heres the jquery:

$("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
    });


Solution :

Bryan, thanks. I basically did something to 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 to see if the class had "selected" in it, if so, I simply displayed the hidden span tag. "$(this).next().show();" is the line that did what I needed on the "click" event to make the submenu stay put. Hope it helps anyone else.

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();
        }); 

    CSS Howto..

    How to get ID from CSS to Javascript without getElementByID?

    How to create profession box shadow effect in div using css

    Given an url, how could a script find what resources are loaded?

    Show required asterisk star after the text?

    How to conditionally resize image if screen not wide enough, with CSS?

    How to make div scalable by using percentage in CSS

    How to keep all the parent except the first LI highlighted when the sub LI is hovered over

    How to reload CSS after ajax call

    How to make commandeButon to vertical align?

    How to add class with data-attribute?

    WordPress TwentyTen menu: how to CSS-select sub-menus in a specific position?

    How to make all input boxes ordered in a straight line? [closed]

    How to contain a div floating outside of container div

    How can I change CSS style definition to make border on specific div

    How to center a border-width shape properly, relative to its parent input button?

    How to vertically align two
    tags perfectly for each resolution?

    How to make my CSS transition smoother/work on different browsers?

    How to find all next siblings from a particular class using css selectors

    How to place the text in the top right corner and not show buttons when printing

    How to loop through divs with no knowledge of what the user viewed and what they WANT to view

    How to change css on multiple elements

    How do I align elements using CSS?

    How do I get 3 horizontal divs to stack in different vertical order or flow when browser width decreases?

    CSS: How to make element appear from left of the screen?

    How to give outer glow effect to column in HTML/CSS?

    How to avoid AjaxMin removal for IE9 and below CSS hack

    How do you change the appearance of a button in javascript?

    How do I make my webpage scale-able depending on the size of the browser window?

    How to apply different CSS styles to 2 elements with the same class name?

    How to use css selector with class prefix by dojo?