Simple Submenus #2

by Cam Gould

HTML

<ul id="menu">
    <li><a href="#submenu-1">Top Menu 1</a></li>
    <li><a href="#submenu-2">Top Menu 2</a></li>
    <li><a href="#submenu-3">Top Menu 3</a></li>
</ul>
<div id="submenu" style="display:none;">
    <div id="hidden">
        <ul id="submenu-1">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
        </ul>
        <ul id="submenu-2">
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
            <li><a href="#">Submenu 6</a></li>
        </ul>
        <ul id="submenu-3">
            <li><a href="#">Submenu 7</a></li>
            <li><a href="#">Submenu 8</a></li>
            <li><a href="#">Submenu 9</a></li>
        </ul>
    </div>
</div>

CSS

* { font-family:sans-serif;margin:0;padding:0; }
ul { margin:20px 10px; }
li { display:inline-block;margin-right:10px; }
#menu a { color:#FFF;text-decoration:none;background-color:#333;padding:10px; }
#submenu { background:#333;padding:10px; }
#submenu a { color:#FFF;text-decoration:none; }

JavaScript

$(document).ready(function () {
    
    //variable where currentAnchor is stored
    var currentSection = 0;
    // hides the submenu as soon as the DOM is ready
    $('#submenu').hide();
    // toggles the submenu on clicking the noted link  
    $('#menu li a').click(function () {

        // remove active class
        $('#menu li a').removeClass('active');
        // add active class
        $(this).addClass('active');

        var href = $(this).attr('href');
        //hide all submenus
        $('#hidden>ul').hide();

        //show one particular menu
        $(href).show();

        //logic for hiding and showing submenu
        if (currentSection == 0) {
            $('#submenu').slideToggle(200);
            currentSection = href;
        } else if (currentSection == href) {
            $('#submenu').slideToggle(200);
            currentSection = 0;
        } else {
            currentSection = href;
        }
        return false;
        
    });
    
    // Hide on mouseout
    $("#submenu").mouseleave(function () {
        $('#submenu').slideToggle(200);
        currentSection = 0;
    });
    
});