"drawers" menu Example

Answer to Alexbass's question on the css-tricks forums: http://css-tricks.com/forums/discussion/14446/drawers-menus

by bren

HTML

<ul>
    <li>
        Images
        <ul>
            <li>
                Nivo
                <ul>
                    <li>css</li>
                    <li>images</li>
                    <li>js</li>
                </ul>
            </li>
            <li>Front Page</li>
            <li>Team</li>
            <li>Global</li>
            <li>
                Pictures
                <ul>
                    <li>Picture 1</li>
                    <li>Picture 2</li>
                    <li>Picture 3</li>
                    <li>Picture 4</li>
                    <li>Picture 5</li>
                </ul>
            </li>
            <li>Social</li>
        </ul>
    </li>
    <li>
        Accounting
        <ul>
            <li>Random</li>
            <li>Accounting</li>
            <li>Items</li>
        </ul>
    </li>
</ul>

CSS

ul ul { display: none; }
ul { padding-left: 40px; }

JavaScript

$('li').click( function(e) {
    
    e.stopPropagation();
    
    var $this = $(this);
    
    if( $this.hasClass('active') && $this.has('ul') ) {
        
        $this.removeClass('active').children('ul').slideUp();
        
    } else {
        
        $this.addClass('active').children('ul').slideDown(); 
        
    }
    
});