Geek asks and answers

Drop-down menu that behaves like its own menu bar

I know there are hundreds of jQuery plugins for dropdowns, but I can’t find one that suits my needs. Requirements:

  • Drop-down windows open when clicked
  • If the drop-down menu is open, the other drop-down lists open when it freezes.
  • Dropdown windows only close until you click.

This is very similar to the way MacOS manages its menu bar, I think Windows does the same.

The Google Code Editor menu behaves quite similar to this, for reference.

I cannot use jQuery UI as an additional dependency. My application is already bold, as it is.

0
source share
1 answer

, , , , :

jsFiddle: http://jsfiddle.net/Mh3Pm/

HTML:

<ul id="main_nav">
    <li>
        <a href="#">Link 1</a>
        <ul class="sub_nav">
            <li><a href="#">Sublink 1</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Link 2</a>
        <ul class="sub_nav">
            <li><a href="#">Sublink 1</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Link 3</a>
        <ul class="sub_nav">
            <li><a href="#">Sublink 1</a></li>
        </ul>
    </li>
</ul>

CSS

ul#main_nav > li {
    width: 70px;
    float: left;
}

ul.sub_nav {
    display: none;
}

#main_nav.active ul.sub_nav.active {
    display: block;
}

JS:

$('ul#main_nav').on('click', function() {
    $(this).toggleClass('active');
});

$('body').on('click', function(e) {
    if ($(e.target).closest('ul#main_nav').length == 0) {
        $('ul#main_nav').removeClass('active');
    }
});

$('ul#main_nav > li > a').on('mouseover', function() {
    $('ul.sub_nav').removeClass('active');
    $(this).siblings('ul.sub_nav').addClass('active');
});

, , .

+1

More articles:


All Articles