Mobile jQuery Menu

by Travis

HTML

<ul id="navigation">
    <li><a href="#" id="navReveal">Click for Menu</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    <li><a href="#">Link 7</a></li>
    <li><a href="#">Link 8</a></li>
</ul>

CSS

#navigation {overflow:hidden;}
#navigation li {width:320px;color:#fff;}
#navigation li a {color:#fff; padding:10px; background:blue; display:block;}
#navigation li a:hover {background:green;}

JavaScript

$(function() {
    
    // Cache the unordered list
    var nav = $('#navigation');
    
    // Store height of navigation!
    var navHeight = $('#navigation').height();
    
    // Shrink navigation!
    $('#navigation').css({height: '40px'});
    
    // Let's animate!
    $('#navReveal').toggle(function() {
        nav.stop().animate({
            height: navHeight            
        }, 500);            
    }, function () {
        nav.stop().animate({
            height: '40px'            
        }, 500); 
    });
    
    // To-do: Make the "40px" dynamic.
    // It will be required on the live code.
    
});