36 Eye-Catching Jquery Navigation Menus

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div style="text-align: justify;"><br />Navigation menus have really important role in any website. For big <br />sites full with a lot of pages and articles, drop down menus and tabs <br />are popular because they can make it a lot more easier to navigate and <br />move through site, also you can save space on website displaying content<br /> on dynamic tabs. Also if you want to create a navigation menu, that <br />really stands out of the crowd, jQuery could be the right choice to <br />choose offering bunch of customizable options. That’s why I present to <br />You 36 really good jquery navigation menu examples for every need.</div><br /><br /><br /><h2 style="text-align: justify;"><br />1.<a href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial" target="_blank">jQuery Tabbed Interface / Tabbed Structure Menu Tutorial</a></h2><br /><div style="text-align: justify;"><br />Tabbed Interface or Tabbed Structure Menu is getting really famous in<br /> web design & development. This tutorial will show you how to build <br />your own tabbed Interface using jQuery with slideDown/slideUp effect. Be<br /> sure to check out the demo, you definitely will like it.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial" target="_blank"><img alt="jquery-tabbed-interface" height="238" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-tabbed-interface.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html" target="_blank">Preview </a> || <a href="http://www.queness.com/resources/archives/jquery-tab-menu.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />2.<a href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/" target="_blank">Animated Menus Using jQuery</a></h2><br /><div style="text-align: justify;"><br />Learn how to create this amazing animated effect menu just with plain Xhtml,CSS and Javascript help, similar to <a href="http://dragoninteractive.com/" target="_blank">Dragon Interactive</a> (dragoninteractive.com).</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/" target="_blank"><img alt="jquery-animated-menu" height="100" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-animated-menu.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.shopdev.co.uk/blog/menuDemo.html" target="_blank">Preview</a> || <a href="http://www.shopdev.co.uk/blog/menuTut.psd" target="_blank">Download</a></div><br /><div style="text-align: justify;"><br /><br /></div><br /><h2 style="text-align: justify;"><br />2.1. <a href="http://codecanyon.net/item/sliding-tabs-jquery-plugin/141774?ref=1stwebdesigner">Sliding Tabs – jQuery Plugin</a></h2><br /><div style="text-align: justify;"><br />Sliding Tabs is a jQuery plugin for creating horizontal and/or <br />vertical animated tabs for your website. You can have multiple instances<br /> of the tabs and customize them in any way with CSS . The script comes <br />with many customization options, making it very flexible and easy to <br />customize to your needs.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://codecanyon.net/item/sliding-tabs-jquery-plugin/141774?ref=1stwebdesigner"><img alt="" class="" height="300" src="http://3.s3.envato.com/files/2497280/inline_preview.jpg" title="Sliding Tabs" width="590" /></a></div><br /><div style="text-align: center;"><br /><a href="http://codecanyon.net/item/sliding-tabs-jquery-plugin/full_screen_preview/141774?ref=1stwebdesigner">View Demo</a></div><br /><h2 style="text-align: justify;"><br />3. <a href="http://nettuts.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank">Create a Cool Animated Navigation with CSS and jQuery (Tutorial + Download)</a></h2><br /><div style="text-align: justify;"><br />Animation and visual feedback are great ways to assist a user in <br />navigating and interacting with a website. While traditionally Adobe’s <br />Flash was the goto for anything animated, these days with the magic of <br />javascript we can avoid Flash altogether.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://nettuts.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank"><img alt="jquery-navigation-slide" height="160" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-navigation-slide.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://nettuts.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank">Preview</a> || <a href="http://nettuts.s3.amazonaws.com/009_jQueryMenu/sm/result.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />4.<a href="http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx" target="_blank">jQuery ListNav Plugin</a></h2><br /><div style="text-align: justify;"><br />This jQuery plugin supplies an easy way to unobtrusively add a <br />letter-based navigation widget to any UL or OL list. An easily stylable <br />(via CSS) nav bar appears above the list, showing the user the letters <br />A-through-Z. Clicking one of the letters filters the list to show only <br />the items in the list that start with that letter. Hovering over a <br />letter (optionally) shows a count above the letter, indicating how many <br />items will be displayed if that letter is clicked. Other options give <br />you control over the basic functionality.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx" target="_blank"><img alt="jquery-list-nav" height="143" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-list-nav.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx" target="_blank">Preview </a> || <a href="http://www.ihwy.com/Labs/downloads/jquery-listnav/2.0/jquery.listnav-2.0.js" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />5. <a href="http://plugins.jquery.com/project/jqDock" target="_blank">jqDock menu</a></h2><br /><div style="text-align: justify;"><br />Transform a set of images into a Mac-like Dock menu, horizontal or <br />vertical, with icons that expand on rollover, and optional labels.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://plugins.jquery.com/project/jqDock" target="_blank"><img alt="jqdock-jquery-plugin-menu" height="303" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jqdock-jquery-plugin-menu.jpg" width="474" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.wizzud.com/jqDock/" target="_blank">Preview</a> || <a href="http://www.wizzud.com/jqDock/" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />5.1. <a href="http://codecanyon.net/item/floatmenu/164109?ref=1stwebdesigner" target="_blank">FloatMenu</a></h2><br /><div style="text-align: justify;"><br />A little similar to the above navigation menu, only more smarter and <br />more pleasing to the eyes. It can float diagonally (both up and down), <br />vertically (left and right), and horizontally (up and down). It is hard <br />to discuss how cool this navigation menu is,<strong> you just have to see the live preview</strong>. Link below the image. Oh, it works for text links too with cool effects.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://codecanyon.net/item/floatmenu/164109?ref=1stwebdesigner"><img alt="" class="size-full wp-image-42205" height="290" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/floatmenu.jpg" title="floatmenu" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://codecanyon.net/item/floatmenu/full_screen_preview/164109?ref=1stwebdesigner" target="_blank">Live Demo</a></div><br /><h2 style="text-align: justify;"><br />6.<a href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" target="_blank">Sliding Jquery Menu</a></h2><br /><div style="text-align: justify;"><br />This tutorial explains and let you download sliding jquery menu and <br />you can see the effect in action over on the PSDtuts webpage in the top <br />right hand corner.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" target="_blank"><img alt="jquery-sliding-menu-tutplus" height="131" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-sliding-menu-tutplus.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br />This is how looks finished demo version:</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" target="_blank"><img alt="vertical-sliding-menu" height="167" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/vertical-sliding-menu.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html" target="_blank">Preview</a> || <a href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sample.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />7.<a href="http://www.alistapart.com/articles/sprites2" target="_blank">CSS Sprites 2 – It’s JavaScript Time</a></h2><br /><h2 style="text-align: center;"><br /><a class="aligncenter" href="http://www.alistapart.com/articles/sprites2" target="_blank"><img alt="css-sprites-2-jquery" height="110" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/css-sprites-2-jquery.jpg" width="570" /></a></h2><br /><div style="text-align: center;"><br /><a href="http://www.alistapart.com/d/sprites2/examples/example1-css.html" target="_blank">Preview</a></div><br /><h2 style="text-align: justify;"><br />8. <a href="http://www.ndesign-studio.com/blog/design/css-dock-menu/" target="_blank">CSS Mac Dock Menu</a></h2><br /><div style="text-align: justify;"><br />If you are a big Mac fan, you will love this CSS dock menu that I <br />designed. It is using Jquery Javascript library and Fisheye component <br />from Interface and some of my icons. It comes with two dock styles – top<br /> and bottom. This CSS dock menu is perfect to add on to my iTheme.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.ndesign-studio.com/blog/design/css-dock-menu/" target="_blank"><img alt="css-dock-menu-jquery" height="120" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/css-dock-menu-jquery.jpg" width="549" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html" target="_blank">Preview</a> || <a href="http://www.ndesign-studio.com/file/css-dock-menu.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />9.<a href="http://www.jeremymartin.name/projects.php?project=kwicks" target="_blank">Kwicks for jQuery</a></h2><br /><div style="text-align: justify;"><br />Kwicks for jQuery started off as a port of the insatiably attractive <br />Mootools effect (of the same name), but has evolved into a highly <br />customizable and versatile widget.</div><br /><h2 style="text-align: center;"><br /><a class="aligncenter" href="http://www.jeremymartin.name/projects.php?project=kwicks" target="_blank"><img alt="kwicks-jquery-menu-navigation" height="104" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/kwicks-jquery-menu-navigation.jpg" width="570" /></a></h2><br /><div style="text-align: center;"><br /><a href="http://www.jeremymartin.name/examples/kwicks.php?example=1" target="_blank">7 Examples</a> || <a href="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/Kwicks-1.5.1.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />10.<a href="http://www.abeautifulsite.net/blog/2008/03/jquery-file-tree" target="_blank">Jquery File Tree</a></h2><br /><div style="text-align: justify;"><br />jQuery File Tree is a configurable, AJAX file browser plugin for <br />jQuery. You can create a customized, fully-interactive file tree with as<br /> little as one line of JavaScript code. Currently, server-side connector<br /> scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a<br /> developer, you can easily make your own connector to work with your <br />language of choice.</div><br /><h2 style="text-align: center;"><br /><a class="aligncenter" href="http://www.abeautifulsite.net/blog/2008/03/jquery-file-tree" target="_blank"><img alt="jquery-file-tree-navigation" height="180" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-file-tree-navigation.jpg" width="570" /></a></h2><br /><div style="text-align: center;"><br /><a href="http://labs.abeautifulsite.net/archived/jquery-fileTree/demo/" target="_blank">Preview</a> || <a href="http://labs.abeautifulsite.net/archived/jquery-fileTree/jquery.fileTree-1.01.zip" target="_blank">Download</a></div><br /><div style="text-align: justify;"><br /><br /></div><br /><h2 style="text-align: justify;"><br /><a href="http://codecanyon.net/item/drop-menu/81289?ref=1stwebdesigner">Drop Menu</a></h2><br /><div style="text-align: justify;"><br />With this script you can make nice and interactive drop down menus. <br />The advantage of this script is that it not only gives you the ability <br />to make list drop down menu. You can also use a div as drop down <br />element. This way you can create big drop down menus like under the <br />buttons products and tutorials in the live preview. Or you can create a <br />login panel in your drop down like I did in the live preview.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://codecanyon.net/item/drop-menu/81289?ref=1stwebdesigner"><img alt="" class="" height="296" src="http://0.s3.envato.com/files/249782.jpg" title="Drop Menu" width="600" /></a></div><br /><div style="text-align: center;"><br /><a href="http://codecanyon.net/item/drop-menu/full_screen_preview/81289?ref=1stwebdesigner">View Demo</a></div><br /><h2 style="text-align: justify;"><br />11.<a href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/" target="_blank">Learning jQuery: Fading Menu – Replacing Content</a></h2><br /><div style="text-align: justify;"><br />Nice tutorial from CSS-tricks explaining how to use CSS with jQuery, <br />this time he teaches how to use jquery fading options on menu.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/" target="_blank"><img alt="menu-fader-jquery-navigation" height="145" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/menu-fader-jquery-navigation.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://css-tricks.com/examples/MenuFader/" target="_blank">Preview</a> || <a href="http://css-tricks.com/examples/MenuFader.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />12. <a href="http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/" target="_blank">How to Make a Smooth Animated Menu with jQuery</a></h2><br /><div style="text-align: justify;"><br />Ever seen some excellent jQuery navigation that left you wanting to <br />make one of your own? This tutorial teaches how to do just that by <br />building a menu and animate it with some smooth effects.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/" target="_blank"><img alt="smooth-animated-jquery-menu" height="160" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/smooth-animated-jquery-menu.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://buildinternet.com/live/smoothmenu/animated-menu.html" target="_blank">Preview</a> || <a href="http://buildinternet.com/live/smoothmenu/animated-menu.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />13.<a href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" target="_blank">Create Vimeo-like top navigation </a></h2><br /><div style="text-align: justify;"><br />Learn how to create navigation just like on Vimeo site, here is only xhtml,css used, but still I wanted to include this.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" target="_blank"><img alt="create-vimeo-like-top-navigation" height="136" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/create-vimeo-like-top-navigation.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.jankoatwarpspeed.com/examples/vimeo_navigation/" target="_blank">Preview</a> + <a href="http://vimeo.com/" target="_blank">Vimeo site</a> || <a href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />14. <a href="http://pupunzi.wordpress.com/2009/01/18/mbmenu/" target="_blank">jQuery (mb)Menu 2.3</a></h2><br /><div style="text-align: justify;"><br />This is a powerful jQuery component to build easily a multilevel tree<br /> menu or a contextual menu (right click) in an intuitive way!</div><br /><div style="text-align: justify;"><br />You can add as many submenus as you want; if your submenu or menu is <br />not declared in the page, the component will get it via ajax calling the<br /> template page with the id of the menu you need (the value of “menu” <br />attribute) the ajax page should return a well formatted code as the <br />example below for the menu voices code.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://pupunzi.wordpress.com/2009/01/18/mbmenu/" target="_blank"><img alt="jquery-mb-menu-navigation" height="190" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-mb-menu-navigation.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://pupunzi.com/mb.components/mb._menu/demo/demo.html" target="_blank">Preview</a> || <a href="http://github.com/downloads/pupunzi/jquery.mb.menu/jquery.mb.menu.2.8.5.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />14.1.<a href="http://codecanyon.net/item/context-menu-class/108671?ref=1stwebdesigner" target="_blank">Context Menu Class</a></h2><br /><div style="text-align: justify;"><br />Advantage: anyone can use this class even without enough programming <br />experience. Or if you are a master coder but is short of time, this one <br />is for you. very easy to customize. You can even make a website the same<br /> as how you see a contextual menu on your desktop!</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://codecanyon.net/item/context-menu-class/108671?ref=1stwebdesigner"><img alt="" class="size-full wp-image-42207" height="290" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/context.jpg" title="context" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://codecanyon.net/item/context-menu-class/full_screen_preview/108671?ref=1stwebdesigner" target="_blank">Live Preview</a></div><br /><h2 style="text-align: justify;"><br />15. <a href="http://www.ndoherty.com/blog/category/coda-slider" target="_blank">Coda Slider</a></h2><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.ndoherty.com/blog/category/coda-slider" target="_blank"><img alt="coda-slider-jquery" height="245" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/coda-slider-jquery.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.ndoherty.com/demos/coda-slider/1.1.1/" target="_blank">Preview</a> || <a href="http://www.ndoherty.biz/demos/coda-slider/1.1.1/coda-slider.1.1.1.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />16. <a href="http://www.sunsean.com/idTabs/#t2" target="_blank">jQuery idTabs</a></h2><br /><div style="text-align: justify;"><br />idTabs is a plugin for jQuery. It makes adding tabs into a website <br />super simple. But it can also open the door to endless possibilities.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.sunsean.com/idTabs/#t2" target="_blank"><img alt="idtabs-jquery-navigation" height="102" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/idtabs-jquery-navigation.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.sunsean.com/idTabs/#t1" target="_blank">Preview</a> || <a href="http://www.sunsean.com/idTabs/jquery.idTabs.min.js" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />17. <a href="http://nettuts.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/" target="_blank">Create a Slick Tabbed Content Area using CSS & jQuery</a></h2><br /><div style="text-align: justify;"><br />One of the biggest challenge to web designers is finding ways to <br />place a lot of information on a page without losing usability. Tabbed <br />content is a great way to handle this issue and has been widely used on <br />blogs recently. This is great tutorial explain<br /><br />ing to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally achieve the same thing using the jQuery library.a </div><br /><div style="text-align: justify;"><br /><br /><a href="http://nettuts.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/"><img src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/slick-tabbed-content-area-css-jquery.jpg" /></a> <br /><a href="http://nettuts.s3.amazonaws.com/001_Tabbed/site/jQuery.html">Preview</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />18. <a href="http://www.gmarwaha.com/blog/category/client-side/jquery/" target="_blank">LavaLamp for jQuery lovers!</a></h2><br /><div style="text-align: justify;"><br />Extremely light weighted Lavalamp menu packaged as a plugin for the amazing jQuery javascript library.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.gmarwaha.com/blog/category/client-side/jquery/" target="_blank"><img alt="lava-lamp-jquery-navigation" height="79" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/lava-lamp-jquery-navigation.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.gmarwaha.com/blog/category/client-side/jquery/" target="_blank">Preview</a> || <a href="http://www.gmarwaha.com/jquery/lavalamp/zip/lavalamp_0.1.0.zip" target="_blank">Download</a></div><br /><div style="text-align: center;"><br /><br /></div><br /><h2 style="text-align: justify;"><br /><a href="http://codecanyon.net/item/mega-menu-complete-set/152825?ref=1stwebdesigner">Mega Menu Complete Set</a></h2><br /><div style="text-align: justify;"><br />This Mega Drop Down Menu Complete Set is perfect for creating unique <br />menus by using one of the 10+ jQuery effects and one of the 13 color <br />variants.Based on a custom grid, this menu allows you to organize your <br />content into columns (from 1 up to 12) with a lot of typography examples<br /> such as headings, lists, images styling, tables, form elements, etc.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://codecanyon.net/item/mega-menu-complete-set/152825?ref=1stwebdesigner"><img alt="" class="" height="300" src="http://1.s3.envato.com/files/3766260/large_preview.jpg" title="Mega Menu Javascript" width="590" /></a></div><br /><div style="text-align: center;"><br /><a href="http://codecanyon.net/item/mega-menu-complete-set/full_screen_preview/152825?ref=1stwebdesigner">View Demo</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />19. <a href="http://clarklab.com/posts/animated-drop-down-menu-with-jquery/" target="_blank">Animated Drop Down Menu with jQuery</a></h2><br /><div style="text-align: justify;"><br />Drop down menus are a really convient way to fit a large menu into a <br />really small initial space. For a long time people have just used a form<br /> element for standard drop downs, but with minimal effort you can create<br /> a much slicker effect using jQuery and CSS.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://clarklab.com/posts/animated-drop-down-menu-with-jquery/" target="_blank"><img alt="animated-dropdown-menu-jquery" height="199" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/animated-dropdown-menu-jquery.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://clarklab.com/lessons/dropdown/example.html" target="_blank">Preview</a> || <a href="http://clarklab.com/lessons/dropdown/animateddropdown.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />20. <a href="http://snook.ca/technical/jquery-bg/" target="_blank">Using jQuery for Background Image Animations</a></h2><br /><div style="text-align: justify;"><br />Five different ways, how to create background image animations using jquery – very live effect.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://snook.ca/technical/jquery-bg/" target="_blank"><img alt="jquery-background-image-animations" height="75" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-background-image-animations.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://snook.ca/technical/jquery-bg/" target="_blank">Preview</a></div><br /><h2 style="text-align: justify;"><br />21. <a href="http://nettuts.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/" target="_blank">How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery</a></h2><br /><div style="text-align: justify;"><br />As you know there are a host of competing javascript libraries around<br /> these days. Though I prefer jQuery, I’ve always liked the way the menu <br />on MooTools worked. So in this tutorial we’ll recreate that same effect …<br /> but this will be done in jQuery!</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://nettuts.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/" target="_blank"><img alt="mootools-homepage-navigation-effect" height="239" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/mootools-homepage-navigation-effect.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/demo.html" target="_blank">Preview</a> || <a href="http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/Download.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />22. <a href="http://greengeckodesign.com/projects/menumatic.aspx" target="_blank">Menumatic Mootools</a></h2><br /><div style="text-align: justify;"><br />MenuMatic is a MooTools 1.2 class that takes a sematic ordered or <br />unordered list of links and turns it into a dynamic drop down menu <br />system. For users without javascript, it falls back on a CSS menu system<br /> based on Matthew Carroll’s keyboard accessible flavor of Suckerfish <br />Dropdowns by Patrick Griffiths and Dan Webb.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://greengeckodesign.com/projects/menumatic.aspx" target="_blank"><img alt="menumatic-vertical-menu-jquery" height="324" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/menumatic-vertical-menu-jquery.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://greengeckodesign.com/projects/menumatic/examples/vertical/" target="_blank">Preview Vertical</a> || <a href="http://greengeckodesign.com/projects/menumatic/examples/horizontal/" target="_blank">Preview horizontal </a> || <a href="http://menumatc.googlecode.com/files/MenuMatic_0.68.3.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />22.1. <a href="http://codecanyon.net/item/super-menu-pack-10-menus/98066?ref=1stwebdesigner">Super menu pack (10 menus)</a></h2><br /><div style="text-align: justify;"><br />Super menu pack is a collection of 10 cool menus, 5 in pure css and 5<br /> using jQuery framework for customize or layout with your websites or <br />applications and projects.It’s perfect for anyone who wants to give a <br />special touch to their designs or find a starting point. Collection is <br />as varied as possible in style and appearance to give you choice. <br />Thinking in design working with code.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://codecanyon.net/item/super-menu-pack-10-menus/98066?ref=1stwebdesigner"><img alt="" class="" height="300" src="http://1.s3.envato.com/files/313239.jpg" title="Super Menu Pack" width="600" /></a></div><br /><div style="text-align: center;"><br /><a href="http://codecanyon.net/item/super-menu-pack-10-menus/full_screen_preview/98066?ref=1stwebdesigner">View Demo</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />23. <a href="http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/" target="_blank">jQuery convertion: Garagedoor effect using Javascript</a></h2><br /><div style="text-align: justify;"><br />For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/" target="_blank"><img alt="garage-door-jquery-menu" height="181" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/garage-door-jquery-menu.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.gayadesign.com/scripts/jquerygaragedoor/" target="_blank">Preview</a> || <a href="http://www.gayadesign.com/scripts/jquerygaragedoor/jquerygarage.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />24. <a href="http://www.mattweltman.com/sliding_tabs.html" target="_blank">Perspective tabs</a></h2><br /><div style="text-align: justify;"><br />Perspective tabs is a simple mootools 1.2 plug-in that allows for a lagre number of tabs to fit into a small space.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.mattweltman.com/sliding_tabs.html" target="_blank"><img alt="perspective-tabs-mootools-menu" height="255" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/perspective-tabs-mootools-menu.jpg" width="570" /></a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />25. <a href="http://marcgrabanski.com/pages/code/fisheye-menu" target="_blank">Fisheye Menu</a></h2><br /><div style="text-align: justify;"><br />Fisheye Menu is an expanding menu based on the MacOSX doc.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://marcgrabanski.com/pages/code/fisheye-menu" target="_blank"><img alt="fisheye-menu-jquery" height="203" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/fisheye-menu-jquery.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="https://github.com/1Marc/javascript-fisheye-menu/zipball/master" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />26. <a href="http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/" target="_blank">Sliding JavaScript Menu Highlight 1kb</a></h2><br /><div style="text-align: justify;"><br />This sliding hover effect script is an easy method to add some flavor<br /> to your navigation. Using the CSS you can easily customize the <br />navigation to fit your “look and feel”. The markup for the script is <br />very simple as below.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/" target="_blank"><img alt="sliding-javascript-menu-highlight" height="106" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/sliding-javascript-menu-highlight.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.leigeber.com/wp-content/uploads/2008/05/menueffect.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />27. <a href="http://www.chromasynthetic.com/blog/mootools-demo-redux/57/" target="_blank">Mootools Demo Redux</a></h2><br /><div style="text-align: justify;"><br />Simple expandable Javascript navigation menu.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.chromasynthetic.com/blog/mootools-demo-redux/57/" target="_blank"><img alt="mootools-demo-redux" height="117" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/mootools-demo-redux.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.chromasynthetic.com/blog/uploads/mootools_nav_example.html" target="_blank">Preview</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />28. <a href="http://berndmatzner.de/jquery/hoveraccordion/" target="_blank">HoverAccordion</a></h2><br /><div style="text-align: justify;"><br />A jQuery Plugin for no-click two-level menus (or whatever else you want to do with it).</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://berndmatzner.de/jquery/hoveraccordion/" target="_blank"><img alt="hover-accordion-jquery" height="325" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/hover-accordion-jquery.jpg" width="570" /></a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />29. <a href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/" target="_blank">Simple Javascript Accordions</a></h2><br /><div style="text-align: justify;"><br />Javascript accordians have been used a lot in todays web design <br />world. There are a lot of scripts we have seen and sure you too would <br />have seen them. This script is one of the smallest accordion script <br />which is extremely simple and easy to integrate. Does’nt require any <br />framework and fully cross-browser compatible.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/" target="_blank"><img alt="simple-javascript-accordion-jquery" height="193" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/simple-javascript-accordion-jquery.jpg" width="468" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.dezinerfolio.com/wp-content/uploads/accordemo/01.html" target="_blank">Preview</a> || <a href="http://www.dezinerfolio.com/system/files/simple_accordions_with_src.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />30. <a href="http://tools.uvumi.com/dropdown.html" target="_blank">UvumiTools Dropdown Menu </a></h2><br /><div style="text-align: justify;"><br />The UvumiTools Dropdown Menu is the menu featured on this website. It<br /> is a very simple multi-level menu built from an HTML unordered list, <br />using Mootools Javascript Framework, it can be easily updated by simply <br />editing a <ul> HTML element.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://tools.uvumi.com/dropdown.html" target="_blank"><img alt="uvumi-tools-dropdown-menu" height="161" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/uvumi-tools-dropdown-menu.jpg" width="570" /></a></div><br /><h2 style="text-align: center;"><br /> </h2><br /><h2 style="text-align: justify;"><br />31. <a href="http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery" target="_blank">Create a multilevel Dropdown menu with CSS and improve it via jQuery</a></h2><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery" target="_blank"><img alt="multilevel-dropdown-menu-jquery" height="117" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/multilevel-dropdown-menu-jquery.jpg" width="490" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.kriesi.at/wp-content/extra_data/suckerfish_tutorial/step4.html" target="_blank">Preview</a> || <a href="http://www.kriesi.at/wp-content/uploads/files/dropdown.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />32. <a href="http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/" target="_blank">jQuery & CSS Example – Dropdown Menu</a></h2><br /><div style="text-align: justify;"><br />Dropdown menus and menu bars have been heavily used since the early <br />days of graphical user interfaces. Their use has become ubiquitous, and <br />even expected, in desktop applications, and the web has quickly followed<br /> suit. This article is intended to describe an extremely basic, yet <br />extremely powerful, technique for adding dropdown menus in your <br />application user interface or website design.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/" target="_blank"><img alt="jquery-css-example-dropdown-menu" height="183" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-css-example-dropdown-menu.jpg" width="510" /></a></div><br /><div style="text-align: center;"><br /><a href="http://designreviver.com/wp-content/uploads/2008/10/example.html" target="_blank">Preview</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />33. <a href="http://nettuts.com/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/" target="_blank">Floating menu jQuery&CSS</a></h2><br /><div style="text-align: justify;"><br />For all of us who deal with long web pages and need to scroll to the <br />top for the menu, here’s a nice alternative: floating menus that move as<br /> you scroll a page. This is done using HTML, CSS and jQuery, and it’s <br />fully W3C-compliant.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://nettuts.com/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/" target="_blank"><img alt="live-floating-menu-jquery" height="203" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/live-floating-menu-jquery.jpg" width="231" /></a></div><br /><div style="text-align: center;"><br /><a href="https://nettuts.s3.amazonaws.com/018_Floating_Menu/demo/dhtml_float_menu_final_nettut.html" target="_blank">Preview</a> || <a href="https://nettuts.s3.amazonaws.com/018_Floating_Menu/code-floating-menu.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />34. <a href="http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started" target="_blank">Superfish – jQuery menu plugin</a></h2><br /><div style="text-align: justify;"><br />Superfish is an enhanced Suckerfish-style menu jQuery plugin that <br />takes an existing pure CSS drop-down menu (so it degrades gracefully <br />without JavaScript) and adds the following much-sought-after <br />enhancements:</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started" target="_blank"><img alt="superfish-examples-jquery" height="186" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/superfish-examples-jquery.jpg" width="415" /></a></div><br /><div style="text-align: center;"><br /><a href="http://users.tpg.com.au/j_birch/plugins/superfish/#examples" target="_blank">Preview</a> || <a href="http://users.tpg.com.au/j_birch/plugins/superfish/#download" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />35. <a href="http://plugins.jquery.com/project/Pager" target="_blank">JQuery Pager</a></h2><br /><div style="text-align: justify;"><br />A simple JQuery plugin to provide paging UI functionality for data driven web applications</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://plugins.jquery.com/project/Pager" target="_blank"><img alt="jquery-pager-menu" height="139" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-pager-menu.jpg" width="417" /></a></div><br /><div style="text-align: center;"><br /><a href="http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html" target="_blank">Preview</a> || <a href="http://www.komodomedia.comwp-content/uploads/2008/10/jquery_feed_menu.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />36. <a href="http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/" target="_blank">jQuery feed menus</a></h2><br /><div style="text-align: justify;"><br />When feeds became popular, it worked to have one icon on your site to<br /> point your readers to your RSS or Atom feeds. As feeds are more <br />prevalent in blogs and websites abroad, the presence of multiple feeds <br />abound – this jquery feed menu is solution here!</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/" target="_blank"><img alt="jquery-feed-menus" height="204" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-feed-menus.jpg" width="491" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.komodomedia.com/mint/pepper/orderedlist/downloads/download.php?file=http%3A//www.komodomedia.com/samples/feed_menu/jquery_feed_menu.zip" target="_blank">Download</a></div><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=bb1f9ab9-9239-4439-9ada-fce26eafe693" style="border: none; float: right;" /></div><br /></div><br />

36 Eye-Catching Jquery Navigation Menus

Navigation menus have really important role in any website. For big sites full with a lot of pages and articles, drop down menus and tabs ar...

Read more »