Question

I was following a dropdown menu tutorial:

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:%20nettuts%20(NETTUTS)&utm_content=Netvibes

What I really want to do is something like that, but to be able to make it so that when a user clicks on an item in the dropdown, then what the user clicked on is highlighted and even when the user moves the mouse away, the item the dropdown stays there and does not collapse to help give the user a frame of reference as to what page they are at. If the user selects another option in dropdown, then the previous one that the user clicked returns to normal and the new item the user clicked on gets highlighted.

How do I accomplish this either with jquery, javascript, or is there a way just with CSS3 and HTML5?

Answer 1

If I understand you correctly you would like the following to happen:

1. First page loads, all drop down menus are collapsed.
2. User hovers over a menu item, drop-down sub menu appears
3. User hovers over sub menu item, it is highlighted.
4. User clicks sub menu item – page reloads. On new page drop-down sub-menu is still visible with the active item highlighted.
5. User does steps 1-4 again for different sub-menu item, when page reloads previous sub-menu is collapsed, but new sub-menu will be visible.

The main question here is whether the page will be reloading whenever the user clicks on an item, because the solution will be different depending on that.

Assuming the page will be reloading then you will need to make it so that when you page reloads the mark-up looks like this:

<nav id="topNav">
    <ul>
        <li><a href="#" title="Nav Link 1">Nav Link 1</a></li>
        <li class="currentParent"><a href="#" title="Nav Link 1">Nav Link 2</a>
            <ul>
                <li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>
                <li class="current"><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>
                <li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>
                <li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>
                <li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>
            </ul>        
        </li>
      <li><a href="#" title="Nav Link 1">Nav Link 3</a></li>
      <li><a href="#" title="Nav Link 1">Nav Link 4</a></li>
      <li class="last"><a href="#" title="Nav Link 1">Nav Link 5</a></li>
  </ul>
</nav>

And you’ll need to change the CSS:

nav ul ul a:hover { background-color:#555; }

to:

nav ul ul a:hover, nav ul ul li.current a:hover { background-color:#555; }

and:

.no-cssgradients nav li:hover, .no-js nav li:hover { ... }

to:

.no-cssgradients nav li:hover, .no-cssgradients nav li.currentParent, .no-js nav li:hover, .no-js nav li.currentParent { ... }

And add the following line:

nav ul li.currentParent ul { display:block; }

And then in the JavaScript change:

//show subnav on hover
$(this).mouseenter(function() {
    $(this).find("ul").stop(true, true).slideDown();
});

//hide submenus on exit
$(this).mouseleave(function() {
    $(this).find("ul").stop(true, true).slideUp();
});

to:

//show subnav on hover
$(this).mouseenter(function() {
    if(!$(this).hasClass('currentParent')) {
        $(this).find("ul").stop(true, true).slideDown();
    }
});

//hide submenus on exit
$(this).mouseleave(function() {
    if(!$(this).hasClass('currentParent')) {
        $(this).find("ul").stop(true, true).slideUp();
    }
});

I haven’t actually tested it out, so I’m sure you’ll have to do more than this to get a perfectly working solution, but I hope you can see the sort of thing I’m trying to do here.