Menu Toggle

Uses jquery to show and hide a menu

by tedp

HTML

<a href="#" id="menutoggle">Menu Toggle</a>

<ul id="menucontainer">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu arcu, dignissim eget rutrum ac, blandit convallis tortor. Aliquam at urna leo, at fringilla diam. Vestibulum et dolor nibh, sit amet fringilla augue. In ullamcorper lorem urna. Nunc tincidunt nulla orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla consequat, eros lacinia fringilla tempor, lorem felis luctus purus, quis auctor est nunc eu quam. Ut gravida bibendum rutrum. Praesent tincidunt, odio quis accumsan adipiscing, odio quam condimentum nunc, eget sodales arcu diam in tellus. Duis bibendum mattis nunc non feugiat. Aliquam non purus ac magna convallis volutpat in ut arcu. Mauris varius sollicitudin sodales. Fusce ut justo libero, ac eleifend nisi. Suspendisse id enim nibh, id feugiat lacus. Donec aliquet nulla et diam varius convallis.</p>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu arcu, dignissim eget rutrum ac, blandit convallis tortor. Aliquam at urna leo, at fringilla diam. Vestibulum et dolor nibh, sit amet fringilla augue. In ullamcorper lorem urna. Nunc tincidunt nulla orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla consequat, eros lacinia fringilla tempor, lorem felis luctus purus, quis auctor est nunc eu quam. Ut gravida bibendum rutrum. Praesent tincidunt, odio quis accumsan adipiscing, odio quam condimentum nunc, eget sodales arcu diam in tellus. Duis bibendum mattis nunc non feugiat. Aliquam non purus ac magna convallis volutpat in ut arcu. Mauris varius sollicitudin sodales. Fusce ut justo libero, ac eleifend nisi. Suspendisse id enim nibh, id feugiat lacus. Donec aliquet nulla et diam varius convallis.</p>

CSS

#menutoggle {
    background-color: lightgray;
    height:30px;
    border-bottom:1px solid black;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

p {
    padding-top: 40px;
}

#menucontainer {
    display:none;
    border: 1px solid black;
    width: 300px;
    position: absolute;
    top: 30px;
    left: 0px;
    background-color: #fff;
}

JavaScript

$('html').click(function() {
    $('#menucontainer').hide(); 
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

$('#menutoggle').click(function(event){
    event.stopPropagation();
    $('#menucontainer').toggle();
});