How do I make this navigation bar track item clicked with HTML5, CSS3, Javascript/Jquery?

I want to use li's and ul's to make the navigation bar with the following interaction similar to what is pictured the following, but what I want to know how to do is the saving of state when the user clicks on an item. A reference image is below:

1. 1) The submenu starts off with nothing shown below it.

   2) Mousing over one of the Items for example "Item 1" will show the associated Subitems for item 1. Mousing over item 2 will show associated subitems unique to item 2.

   3) Clicking on a subitem, will cause it to highlight and stay there unless the user decides to mouseover a different item and click on a different subitem.

Example Steps of Interaction: Say the user is on item 1 and clicks on Subitem 2. It remains highlighted even if user mouses off of it.

• a) The user then mouses over Item 3 and picks a subitem from item 3. The previous subitem that was highlighted becomes no longer highlighted and instead the new subitem picked is highlighted.
• b) The user mouses over Item 3 just to see the items under item 3, but when mousing off of it, it shows back开发者_开发技巧 to the original state at the top with Item 1's Subitem 2 highlighted.

What is the best way to do this and how? Many thanks.

You can use .show() and .hide() functions.

Try something like this :

<ul class="menu">
  <li><a href="#submenu_1">Item 1</a></li>
  <li><a href="#submenu_2">Item 2</a></li>
</ul>

<ul class="submenu" id="submenu_1">
  <li>...</li>
</ul>

<ul class="submenu" id="submenu_2">
  <li>...</li>
</ul>

$(document).ready(function(){
  $(".submenu").hide();

  $(".menu a").click(function(){
    var submenu_todisplay = $(this).attr("href"); 
    $(".submenu").hide();
    $(submenu_todisplay).show();
  });
});

I didn't test this code, but it's to show you how to start. You can use .hover() instead of .click() and you have to add CSS.

May be i didn't understand well.. but what's the problem? You can use onClick, onMouseOver, onMouseDown. About the mechanism - I think that if there are a lot of items(in your example there are only 3 items and 3 sub-items in each(?) item) than you should make it the "b)" way. But if the situation is the same as in your example it really doesn't matter - just try and see - what do you like most)

Simple unordered list:

<ul id="nav">
    <li>Item 1
        <ul>
            <li>Subitem 1.1</li>
            <li>Subitem 1.2</li>
            <li>Subitem 1.3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Subitem 2.1</li>
            <li>Subitem 2.2</li>
            <li>Subitem 2.3</li>
        </ul>
    </li>
    <li>Item 1
        <ul>
            <li>Subitem 3.1</li>
            <li>Subitem 3.2</li>
            <li>Subitem 3.3</li>
        </ul>
    </li>
</ul>

Some CSS to style it:

ul {
    display:none;
    width:250px;
}
#nav {
    display:block;
}
li {
    float:left;
    position:relative;
    top:5px;
    background-color:#000;
    width:80px;
    height:25px;
    text-align:center;
    color:#FFF;
    cursor:pointer;
}
#nav>li {
    background-color:#666;
}

Simple JQuery to make it work:

$('li').mouseenter(function(){
    $(this).children('ul').show();
});

$('li').mouseleave(function(){
    $(this).children('ul').hide();
});

Demo: http://jsfiddle.net/Ct4hM/

I would save the state as a specific class for the item/subitem.

You can have a classic full-css menu showing submenus on hover, and setting selected classes to the right elements on click. Then a special css on the selected classes ensure that the right submenu is displayed, with the right element selected when the mouse is not hovering the menu.

You can then make sure that another menu is displayed when hovering another item by making :hover submenues appear on top of .selected ones.

You may have to struggle a bit with the positions, but if you don't mind having absolute positionning it should not be such an issue.

Here is a working example: http://jsfiddle.net/Ct4hM/2/