20 Excellent JavaScript Navigation Techniques and Examples
JavaScript allows you to add interactivity and feedback, making the user’s experience better and more intuitive.
Recently we showed you some exceptional CSS navigation techniques and we’d like to follow that up with an article about JavaScript-based navigation examples that you can use. Keep in mind that some of these techniques might not work if the client browser has JavaScript turned off (on average, 5% of users have JS disabled according to W3 web statistics).
In this article you’ll discover some terrific and unique JavaScript-powered navigation techniques and examples.
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.
1. MenuMatic
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.
2. Animated Menu using jQuery
A technique for animating menu items when a user hovers over them. Source files, including the PSD file, are available to download.
3. Garagedoor Effect using jQuery
Gaya Kessler presents a wonder JavaScript menu that mimics the real garage door using jQuery.
4. JGlide Menu
A very unique menu that floats on the page. Users can drag it to a position they desire.
5. Vertical Sliding jQuery Menu
HVDesigns presents a menu that drops down and reveals more links.
6. Perspective Tabs
You can have scrolling tabs with animation using this technique.
7. Vertical Digg-like Menu
Antonio Lupetti presents a Digg-like menu that uses simple JavaScript.
8. LavaLamp
When you hover an item, you’ll see the CSS sliding door technique created using jQuery. An alternate version for MooTols can be here.
9. Fisheye Menu
If you’re a big fan of the Mac dock you will enjoy this menu.
10. Simple JavaScript Accordions
A great technique for integrating accordion-style menus into your site.
11. Sliding JavaScript Menu Highlight
This sliding hover effect script is an easy technique for highlighting menu items.
12. Fading Menu – Replacing Content
This technique allows you to fade in and fade out menu items.
13. Simple Multi-level Drop-Down Menu
A simple JavaScript drop down menu tutorial.
14. Using jQuery for Background Image Animations
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.
16. HoverAccordion/Sidebar Menu
This is an accordion plugin which can be used as a vertical sidebar menu too.
17. UvumiTools Dropdown Menu
Another JavaScript menu based on MooTools with lots of features.
18. jQuery UI Tabs
Easily separate content using this tab example.
19. Proto.Menu: Right Click Menu
A customizable right-click menu written on top of the Prototype framework.
20. Accessible Expanding and Collapsing menu
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.
Related content
- 40 Exceptional jQuery Interface Techniques and Tutorials
- Graphing/Charting Data on Web Pages: JavaScript Solutions
- 40 Excellent Resources for JavaScript Coders
- 10 Promising JavaScript Frameworks
- Related categories: JavaScript, User Interface, Tutorials
About the Author
.
30 Comments
Gaya
May 1st, 2009
Hey Kawsar.
Thanks for the include :) Appreciate it!
Gaya
moih60
May 1st, 2009
thats great post..many uses and thats special work
very very thanks for ur sharing hope more post like this
T-Law
May 1st, 2009
Very useful list, thanks.
Jesse Korzan
May 1st, 2009
Here’s another approach to navigation using javascript (degrades nicely, doesn’t compromise usability).
http://www.workatplay.com
bsmokeman
May 1st, 2009
extjs.com components make great menus(tabs, right click, toolbars, etc…)
Easily customized with css overrides, and can be rendered to any div in your layout. the new ext core 3, is tiny!
Christopher
May 1st, 2009
So, DHTML makes its return.
Boxcar Studio
May 1st, 2009
A nice collection of visual enhancements to the standard fare of simple CSS-based menus. It’s nice to see that many of them degrade gracefully. Thanks for the post.
Factorial
May 1st, 2009
“So, DHTML makes its return.”
You mean changing webpages using JavaScript? Yeah, that never went away.
Sam Mbale
May 1st, 2009
I have used the Simple Multi-level Drop-Down Menu on a number of websites, here is a demo
http://mpelembe.blogware.com/example-js/bar_navigation_menus.html
lord_t
May 1st, 2009
Hi, and what you think about my solution for navigation?
This is jQuery plugin.
(unpublished version)
http://hrabstwo.net/hornet/jqNavigMenu/jq3_plugin318.htm
(official release)
http://hrabstwo.net/hornet/jqNavigMenu/jq3_plugin.htm
cah cepu
May 1st, 2009
hohoho.. i need that tutorials…
thanks for share…
Ivan
May 2nd, 2009
so tired of seeing the same stupid menus in all these sites…
HollsK
May 2nd, 2009
@Christopher: “So, DHTML makes its return.”
Really. Some of these are pretty horrible. Part of the big Web 2.0 revolution is supposed to be graceful degradation, but that’s being thrown out of the window in a lot of these. I guess this is the price to pay when javascript becomes so easy almost anybody can do it. :/
Ryan
May 3rd, 2009
I’d be really cautious in using javascript for a critical component of a website like the navigation. It might be nice to enhance a menu that already works for everyone, but I think progressive enhancement is the only way to go.
Keith
May 6th, 2009
Hi all,
I tried using MenuMatic for a client’s site. Keep in mind that the nice rounded style visible in the screenshot above is only available with css3. It uses rounded corners in the css. Check out the demo in IE7 to see the difference.
storm
May 12th, 2009
Cool list, cheers.
I came across this one and would like to know if anyone else has seen anything similar?
http://www.templatelite.com/uploads/2009/02/js-image/type-8.html
employee time management
May 15th, 2009
Wow not one person complaining that this doesnt work with noscript…. im surpirsed.
Dev The Web
May 17th, 2009
I used css tabs recently in my site (link in the name), but I realized that simple links it the best way for navigation. Of course, if there’re no too much menu elements :))
SonicRadish
May 19th, 2009
Great Post!
Many thanks for including my jGlideMenu (#4) in the list.
satish.borkar
May 19th, 2009
i like it
web2000
May 22nd, 2009
love the list.. and the comments list some nice examples as well. Thanks!
John W. Furst
May 25th, 2009
Excellent examples. Thanks you.
Since the web in general is not really usable
anymore without having javascript enabled,
those 5% no-javascript folks might not be
in your target group altogether.
elf_
July 1st, 2009
nicely…. I ‘ll try it
Niek Kouwenberg
August 10th, 2009
You might also want to check out Menu.js, it’s a small JavaScript (drop-down) menu for developers. Free/open source and based on Prototype: http://www.menujs.net/
The examples on the website are not the best looking ones, but check out the live-website examples for what it can do.
Rajib Bahar
October 10th, 2009
Thanks… it’ll be handy for me later.
Siddhartha
November 3rd, 2009
It very good
Gaurav Sood
November 17th, 2009
Good for All……….
Suggest more
Pieter
December 15th, 2009
Like the Article… check out http://www.fenturesolutions.com for a unique way of using scrollTo for navigation!
Arindam
December 23rd, 2009
It’s very good, Thanks to help me
Mohammed Shafiq
January 10th, 2010
hello, i would like to request you to please give me the complete source code of “Simple JavaScript Accordions” asap, thankyou so much, please send me, please
Leave a Comment