Navigation Menu That Shows/Hides On Rollover and Click


Tags: jquery,css,menu

Problem :

I would like to know if its possible to have a CSS-only navigation menu that toggles to shows/hides other divs when a navigation element is clicked or rolled-over?

Here is an example of what I mean: http://www.johnlewis.com

Note that on that site, the CSS hover navigation menu works even with Javascript disabled.

Question 1: are there any tutorials or examples available of how to create this type of menu? I have looked and seen some tab-based menu tutorials but they don't look anything like this.

Question 2: Can I replicate the example but also have the sub-menu appear when a top-level menu item is clicked (not just rolled-over). This would be helpful for tablet users who can't perform rollovers. On the first click I'd like the sub-menu to appear. On the second click of the same top-level item, I'd like it to go to that actual link. Is this going to require JS/JQuery or can it be done CSS only as well?

I don't mind using a JQuery solution but would prefer a CSS solution if possible. I just need some pointers, not a full solution of course.



Solution :

This is possible using just CSS with the :hover pseudo-selector for the parent div, and also adding a class when you click on it (for tablets). For a quick example, you'd want something like this for the structure:

<div class="nav-header">
    <h3>My Header</h3>
    <div class="sub-menu">
        <!-- Your sub menu code -->
    </div>
</div>

Your CSS would look something like this:

div.nav-header div.sub-menu {
    display: none;
}

div.nav-header:hover div.sub-menu, div.nav-header.clicked div.sub-menu {
    display: block;
    /* your positioning code */
}

Then in the click event handler:

function click_handler(eventArgs) {
    // Often, jQuery click event targets are the children of the element you actually want.
    var $navHeader = $(eventArgs.target).hasClass('nav-header') ? $(eventArgs.target) : $(event.target).parents('div.nav-header');

    if ( $navHeader.hasClass('clicked') ) {
        window.location.href = "/yourUrl";
    } else {
        $navHeader.addClass('clicked');
    }
}

    CSS Howto..

    How to remove the border around the image?

    How to fake width animation with CSS transform?

    How to do the right positioning of css elements?

    how can css reset :hover to default state?

    How to use html entities in CSS content property?

    SCSS, Compass and GULP: How to minify without breaking CSS?

    How can I force an image to display in its entirety with CSS?

    How to change asp:DropDownList extended background color ? CSS class

    Vim: How would I recursively run “:sort” for everything between curly braces?

    How to create a 3 column layout in css?

    How to use JavaScript to Alter CSS for Multiple Elements

    How to vertically center divs?

    howto create the iPhone Contacts header scroll Effect for html?

    How to link css to html in an express project?

    How do I correct this error?

    How do I center my content inside the menu?

    How to avoid CSS selector applying to more than one level of descendants

    How to place two canvases adjacent to each other and on top of a third one

    How to Add external Javascript and CSS for CakePhp

    how do i prevent respond.js reading my retina display media query?

    How to change the scrolling text in CSS or JQuery

    how to remove margin or padding of window in javascript/css?

      list only showing contents of first
    • , ignoring second

    CSS/Menu: How to position element right below/beside elements

    How to remove all inherited CSS formatting for a table?

    How to make css for navbar (Jquery Mobile) bottom up submenu automatic?

    How to see the style of the thumb of range input in Chrome developer tools?

    How can I use a different CSS using jQuery?

    How to jump to specific sections of a sprite sheet in css?

    How to hide this element using CSS or JQuery