Advertisment
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 are popular because they can make it a lot more easier to navigate and move through site, also you can save space on website displaying content on dynamic tabs. Also if you want to create a navigation menu, that really stands out of the crowd, jQuery could be the right choice to choose offering bunch of customizable options. That’s why I present to You 36 really good jquery navigation menu examples for every need.
1.jQuery Tabbed Interface / Tabbed Structure Menu Tutorial
Tabbed Interface or Tabbed Structure Menu is getting really famous in web design & development. This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect. Be sure to check out the demo, you definitely will like it.
2.Animated Menus Using jQuery
Learn how to create this amazing animated effect menu just with plain Xhtml,CSS and Javascript help, similar to Dragon Interactive (dragoninteractive.com).
3. Create a Cool Animated Navigation with CSS and jQuery (Tutorial + Download)
Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. While traditionally Adobe’s Flash was the goto for anything animated, these days with the magic of javascript we can avoid Flash altogether.
4.jQuery ListNav Plugin
This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the basic functionality.
5. jqDock menu
Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels.
6.Sliding Jquery Menu
This tutorial explains and let you download sliding jquery menu and you can see the effect in action over on the PSDtuts webpage in the top right hand corner.
This is how looks finished demo version:
7.CSS Sprites 2 – It’s JavaScript Time
8. CSS Mac Dock Menu
If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles – top and bottom. This CSS dock menu is perfect to add on to my iTheme.
9.Kwicks for jQuery
Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget.
10.Jquery File Tree
jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.
11.Learning jQuery: Fading Menu – Replacing Content
Nice tutorial from CSS-tricks explaining how to use CSS with jQuery, this time he teaches how to use jquery fading options on menu.
12. How to Make a Smooth Animated Menu with jQuery
Ever seen some excellent jQuery navigation that left you wanting to make one of your own? This tutorial teaches how to do just that by building a menu and animate it with some smooth effects.
13.Create Vimeo-like top navigation
Learn how to create navigation just like on Vimeo site, here is only xhtml,css used, but still I wanted to include this.
Preview + Vimeo site || Download
14. jQuery (mb)Menu 2.3
This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!
You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component will get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.
15. Coda Slider
16. jQuery idTabs
idTabs is a plugin for jQuery. It makes adding tabs into a website super simple. But it can also open the door to endless possibilities.
17. Create a Slick Tabbed Content Area using CSS & jQuery
One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. This is great tutorial explaining 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.
18. LavaLamp for jQuery lovers!
Extremely light weighted Lavalamp menu packaged as a plugin for the amazing jQuery javascript library.
19. Animated Drop Down Menu with jQuery
Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.
20. Using jQuery for Background Image Animations
Five different ways, how to create background image animations using jquery – very live effect.
21. How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery
As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I’ve always liked the way the menu on MooTools worked. So in this tutorial we’ll recreate that same effect … but this will be done in jQuery!
22. Menumatic Mootools
MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.
Preview Vertical || Preview horizontal || Download
23. jQuery convertion: Garagedoor effect using Javascript
For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!
24. Perspective tabs
Perspective tabs is a simple mootools 1.2 plug-in that allows for a lagre number of tabs to fit into a small space.
25. Fisheye Menu
Fisheye Menu is an expanding menu based on the MacOSX doc.
26. Sliding JavaScript Menu Highlight 1kb
This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”. The markup for the script is very simple as below.
27. Mootools Demo Redux
Simple expandable Javascript navigation menu.
28. HoverAccordion
A jQuery Plugin for no-click two-level menus (or whatever else you want to do with it).
29. Simple Javascript Accordions
Javascript accordians have been used a lot in todays web design world. There are a lot of scripts we have seen and sure you too would have seen them. This script is one of the smallest accordion script which is extremely simple and easy to integrate. Does’nt require any framework and fully cross-browser compatible.
30. UvumiTools Dropdown Menu
The UvumiTools Dropdown Menu is the menu featured on this website. It is a very simple multi-level menu built from an HTML unordered list, using Mootools Javascript Framework, it can be easily updated by simply editing a <ul> HTML element.
31. Create a multilevel Dropdown menu with CSS and improve it via jQuery
32. jQuery & CSS Example – Dropdown Menu
Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.
33. Floating menu jQuery&CSS
For all of us who deal with long web pages and need to scroll to the top for the menu, here’s a nice alternative: floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it’s fully W3C-compliant.
34. Superfish – jQuery menu plugin
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:
35. JQuery Pager
A simple JQuery plugin to provide paging UI functionality for data driven web applications
36. jQuery feed menus
When feeds became popular, it worked to have one icon on your site to point your readers to your RSS or Atom feeds. As feeds are more prevalent in blogs and websites abroad, the presence of multiple feeds abound – this jquery feed menu is solution here!
show your love with a i love jquery logo: http://www.chrispie.com/blog/i-love-jquery-300/
Great list.
Thanks!
I love the list and I am really looking forward to trying the MenuMatic navigation. I just hope that I can make it play nicely with jQuery, becuase I really like Kwicks too!
Hi,
Any link to download number 20 ???
thanks
You could try viewing the source code…
The link to number 10 (jQuery File Tree) has changed. It is now at http://abeautifulsite.net/blog/2008/03/jquery-file-tree/
Thanks for the great examples.
Great stuff, many thanks
Wow these are amazing. I can’t believe I just came across this site. Bookmarking as will come into use for sure for my next project. thanks!
Wow Excellent flexible rich look navigation menus are here ,
I like very much I suggest every body Go through this menus
Lavakumar.ch
Excelent work!!!! tanks!
[...] 36-eye-catching-jquery-navigation-menus [...]
Hai all,
Realy, realy good samples… but i have a question about nr. 12.
is it possible to make the corners of the LI elements rounded with jquery-corners, or -moz-border-radius? ‘cos i tried but fialed like a million times :P
wel, let me hear about it :)
muy buen aporte…
You have a nice collection here.
.-= Sapkali Cocuk´s last blog ..Herbalife Ürün Satış Sitesi =-.
Nice collection, Thanks for sharing
Great Stuff
Thanks for the great links and for sharing
Thanks a bunch. I was searching for some sort of coda slider, I just changed a bit of the code here and there and made it awesome.
Thanks for jQuery pager plugin…
.-= Raghibsuleman´s last blog ..Home =-.
[...] Espero que os sirva, enlace. [...]
[...] 36 Eye Catching jQuery Navigation Menu [...]
Great! i have been looking for something like this!
.-= PSDDude´s last blog ..Industrial Nightmare Movie Poster =-.
Thank for you shar
thanks good jquery examples
.-= ekitap´s last blog ..Kubat – Dermanýmsýn =-.
What a great examples of beautiful design. I really love to see these little, functional pieces of art! My favorites are 12, 25, 33!
.-= London Girl´s last blog ..London Removals =-.
Wow great list. Thanks for your post!
Wow, great list. Thanks for your post!
Thanks for this information It really shar article
Thanks for this information It really
Thanks for your post Great post article
Thanks for this information It really helped me to find a solution for my website.
this is thank you.. :)
Excellent post. Thanks
Thanks for your post , Great post.
Thanks for help us, these are very good navigation menus.
.-= student aid´s last blog ..Financial Aid Grant Information =-.
ohhhhh,
these are great menus, thanks for sharing us
[...] 36 Eye-Catching Jquery Navigation Menus [...]
You have a nice collection of jQuery navigation. Thanks for Sharing.
.-= Glance World´s last blog ..Tablet Wars: Apple iSlate vs Google Tablet =-.
[...] Articles: 36 Eye-Catching Jquery Navigation Menus 25 jQuery Tutorials for Improved Navigation Menus 10 Fresh jQuery Tutorials to Enhance Navigation [...]
Wow, it’s a great list.
How can you collect that?
My favorit is number 16. Thank yo for this great list of jQuery navigation menus.
You have a nice collection here. I will use one of this collection in one of this days
.-= Techie Talks´s last blog ..Broadband Internet Connection =-.
[...] 36 magnificos ejemplos de lo que son menus basados en jquery [...]