Tip: clicking on each image will take you directly to the demo page of the navigation menu technique if it’s on a separate page. Their names will take you to their project web page.
This example takes semantic ordered or unordered list of links and turns it into a dynamic drop down menu system that can be vertically or horizontally oriented.
A technique for animating menu items when a user hovers over them. Source files, including the PSD file, are available to download.
4. JGlide Menu
A very unique menu that floats on the page. Users can drag it to a position they desire.
HVDesigns presents a menu that drops down and reveals more links.
You can have scrolling tabs with animation using this technique.
9. Fisheye Menu
If you’re a big fan of the Mac dock you will enjoy this menu.
A great technique for integrating accordion-style menus into your site.
This sliding hover effect script is an easy technique for highlighting menu items.
This technique allows you to fade in and fade out menu items.
A technique for creating animated menus using jQuery and CSS background-position properties.
15. Mootools Redux
A menu using MooTools that expands the link’s font size when you mouse over the item.
This is an accordion plugin which can be used as a vertical sidebar menu too.
18. jQuery UI Tabs
Easily separate content using this tab example.
A customizable right-click menu written on top of the Prototype framework.
This menu example allows you have two levels of navigation. When you click on main category the subcategory expands.
What are you using?
We’d like to know if you have experience with any of these techniques and examples. Have a live web page? Share it with us in the comments.
- 40 Exceptional jQuery Interface Techniques and Tutorials
About the Author
This was published on May 1, 2009