Build a Smooth Slide-Out Navigation Menu with jQuery
A smoothly-animated vertical navigation menu is a refreshing alternative to the standard horizontal navs, and can be created fairly easily with CSS and some simple jQuery.
Here's how it's done:
You'll need to start out with your basic <ul> navigation structure. [html] <ul id="navigation"> <li class="home"><a href="#">home</a></li> <li class="about"><a href="#">about</a></li> <li class="search"><a href="#">blog</a></li> <li class="photos"><a href="#">portfolio</a></li> <li class="contact"><a href="#">contact</a></li> </ul> [/html] And you'll need to add a little bit of styling. This is the CSS that I used, but feel free to get creative and make it your own: [css] ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 10px; left: 0px; list-style: none; z-index:9999; } ul#navigation li { width: 100px; } ul#navigation li a { text-align: center; text-decoration: none; font-family: "Cabin"; color: #555; font-weight: bold; font-size: 16px; display: block; margin-left: -2px; padding: 7px 0px; width: 100px; height: auto; background-color:rgba(255, 227, 220, .6); border:1px solid #AFAFAF; border-radius:0px 10px 10px 0px; box-shadow: 0px 2px 2px #333; } [/css] Now you should have a good-looking vertical menu. Time to animate with jQuery.
This first  function will give the menu a margin-left of -90px as soon as the page loads. This allows users to see the menu before it smoothly disappears outside of the browser window so that they know it's there for them to use. The jQuery for this function is very straightforward: [javascript] $(function() { $('#navigation a').stop().animate({'marginLeft':'-90px'},1000); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-2px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'-85px'},200); } ); }); [/javascript] All that's left to do is add a function that will reveal a menu item when it's hovered upon. This should do the trick: [javascript] $(function() { $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-2px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'-90px'},200); } ); }); [/javascript] Now you've got a fun vertical nav that can be used to add some useful animation to any web page.
Here's how it's done:
You'll need to start out with your basic <ul> navigation structure. [html] <ul id="navigation"> <li class="home"><a href="#">home</a></li> <li class="about"><a href="#">about</a></li> <li class="search"><a href="#">blog</a></li> <li class="photos"><a href="#">portfolio</a></li> <li class="contact"><a href="#">contact</a></li> </ul> [/html] And you'll need to add a little bit of styling. This is the CSS that I used, but feel free to get creative and make it your own: [css] ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 10px; left: 0px; list-style: none; z-index:9999; } ul#navigation li { width: 100px; } ul#navigation li a { text-align: center; text-decoration: none; font-family: "Cabin"; color: #555; font-weight: bold; font-size: 16px; display: block; margin-left: -2px; padding: 7px 0px; width: 100px; height: auto; background-color:rgba(255, 227, 220, .6); border:1px solid #AFAFAF; border-radius:0px 10px 10px 0px; box-shadow: 0px 2px 2px #333; } [/css] Now you should have a good-looking vertical menu. Time to animate with jQuery.
This first  function will give the menu a margin-left of -90px as soon as the page loads. This allows users to see the menu before it smoothly disappears outside of the browser window so that they know it's there for them to use. The jQuery for this function is very straightforward: [javascript] $(function() { $('#navigation a').stop().animate({'marginLeft':'-90px'},1000); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-2px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'-85px'},200); } ); }); [/javascript] All that's left to do is add a function that will reveal a menu item when it's hovered upon. This should do the trick: [javascript] $(function() { $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-2px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'-90px'},200); } ); }); [/javascript] Now you've got a fun vertical nav that can be used to add some useful animation to any web page.
