New Better Full Width Submenus

by fazila1990

HTML

<ul id="menu">
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
</ul>

<div id="submenu" style="display:none;">
   <div id="hidden">
        <ul id="one">
            <li>One</li>
            <li>One</li>
            <li>One</li>
            <li>One</li>
        </ul>
        <ul id="two">
            <li>Two</li>
        </ul>
        <ul id="three">
            <li>Three</li>
        </ul>       
    </div>
</div>

CSS

#menu li {
    display: inline-block;
}
#menu li a {
    padding: 10px 20px;
    background: #e45740;
    color: #FFF;
    text-decoration: none;
    height: 50px;
    line-height: 50px;
}
#submenu {
    display: block;
    width: 100%;
    padding: 10px;
    background: #555;
    color: #FFF;
}
#submenu #hidden {
}

* {
    font-family: sans-serif;
}

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;
    });
});

// Based on http://jsfiddle.net/skram/AyNSS/7/