jQuery navigation plugins can help spice up any website, as well as helping to keep content more organized and intuitive for the user. Drop down and branched menus are among the most popular types of jQuery nav menus, but there’s also slide out menus and animated menus that are possible as well.
In this collection, we’ve gathered up some powerful jQuery navigation plugins and jQuery navigation tutorials for you to use in your projects.
If you are looking for more free jQuery plugins, check out these posts:
- Useful jQuery Plugins for Every Project
- 10 Powerful AJAX jQuery File Uploaders
- Sleek jQuery Accordion Menu Plugins and Tutorials
- 30 jQuery WordPress Tutorials and Plugins
- Helpful jQuery Tooltip Plugins
- Awesome jQuery Navigation Menu Tutorials and Plugins
- 30 Awesome jQuery Slider Plugins and Tutorials
Beautiful Slide Out jQuery Navigation
Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare you some space on your website. The items will be semi-transparent which means that content under them will not be completely hidden.
Sexy Drop Down jQuery Menu with CSS
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.
Create the Fanciest Dropdown You Ever Saw
After speaking with Brian, he agreed to write a tutorial for us on how he created his website navigation menu. Recently he has changed his website design and the layout, but this tutorial is sweet, and one amazing navigation
Mega Drop Down Menu with CSS and jQuery
While in the process of redesigning 4wheelparts.com, I decided to explore new methods of working with our huge number of inventory and categories. I did some research and noticed a new trend for ecommerce sites in having what they call “mega drop down menus”.
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.
Sliding jQuery Menu
Hi there welcome to another tutorial, in this tutorial il show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.
Designing the Digg Navigation
The design of Digg is full of smart ideas. The site identity is strong but doesn’t take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account information are right up top where you would expect them to be. It’s fluid width, but it doesn’t shrink too far or grow too big. Let’s design the Digg header!
Create an Out of the Box jQuery Navigation
Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.
Lavalamp for jQuery
Create a Mootools Inspired Homepage using jQuery