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
This was published on May 1, 2009
62 Comments
Gaya May 01 2009
Hey Kawsar.
Thanks for the include :) Appreciate it!
Gaya
moih60 May 01 2009
thats great post..many uses and thats special work
very very thanks for ur sharing hope more post like this
T-Law May 01 2009
Very useful list, thanks.
Jesse Korzan May 01 2009
Here’s another approach to navigation using javascript (degrades nicely, doesn’t compromise usability).
http://www.workatplay.com
bsmokeman May 01 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 01 2009
So, DHTML makes its return.
Boxcar Studio May 01 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 01 2009
“So, DHTML makes its return.”
You mean changing webpages using JavaScript? Yeah, that never went away.
Sam Mbale May 01 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 01 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 01 2009
hohoho.. i need that tutorials…
thanks for share…
Ivan May 02 2009
so tired of seeing the same stupid menus in all these sites…
HollsK May 02 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 03 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 06 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 12 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 15 2009
Wow not one person complaining that this doesnt work with noscript…. im surpirsed.
Dev The Web May 17 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 19 2009
Great Post!
Many thanks for including my jGlideMenu (#4) in the list.
satish.borkar May 19 2009
i like it
web2000 May 22 2009
love the list.. and the comments list some nice examples as well. Thanks!
John W. Furst May 25 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_ Jul 01 2009
nicely…. I ‘ll try it
Niek Kouwenberg Aug 10 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 Oct 10 2009
Thanks… it’ll be handy for me later.
Siddhartha Nov 03 2009
It very good
Gaurav Sood Nov 17 2009
Good for All……….
Suggest more
Pieter Dec 15 2009
Like the Article… check out http://www.fenturesolutions.com for a unique way of using scrollTo for navigation!
Arindam Dec 23 2009
It’s very good, Thanks to help me
Mohammed Shafiq Jan 10 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
Disain Mar 19 2010
thx..It is my great pleasure to visit your website and to enjoy your excellent post here.
Zawuni Apr 12 2010
Thanks for your ambitious selection!
An experimental dictionary http://bu4.taipudex.com/pinyin.htm is designed for easy access. You reach the entries amongst others with arrow keys only.
Mike S Apr 28 2010
The links for #2 are broken, sadly it appears the blog has disappeared. =/
Calvin Omari May 07 2010
Hi how can I do a drop down menu, http://www.thecreativewonder.com/ or http://www.standardchartered.com please help I need to use the menu in my website
Thank you my email is [email removed]
Mark May 25 2010
nice! where can I download these things?
ziggy Jun 02 2010
came across your post which is very good. I noticed you have many good suggestions.
i did not see AlLWebMenus (javascript menu maker) in your list. it might help others too:
http://www.likno.com
Mazed Jun 07 2010
Thanks its nice
wp programmer Jun 22 2010
Hi..,
Its nice script. This is easy integrate.
this script is i using to my local website..
I ll integrate this script is my client project.
This script is I integrated.
#8. LavaLamp
prince Jun 23 2010
how can i create the kind of butttons(links) at the bottom of a page like those used on myspace.com, facebook.com and cbsnews.com.
You’d realise that with myspace.com and facebook.com, the links im referring to is where you have the chat button.
does anyone know how to create this type of technology? or are there any websites with tutorials or scripts?
Riz Jul 31 2010
Great thanks a lot guys
shreyansh Aug 22 2010
Thank you so so much.
i will help me a lot in my JAVA project in college.
shreyansh Aug 22 2010
it*
Abhijit Sep 03 2010
useful content………..but needs updation…..
ritzinfotek Sep 12 2010
Thank you so much for showing collection of menu. Is there any way to convert drop down menu to drop up, so the submenu will slide above instead of down.
Future Webs Sep 14 2010
Great Navigation systems, look forward to seeing more posts like this! Thanks
Keane Driver Nov 12 2010
I’m not a fan of the drop down menus, when they obsure other content
Webedit Nov 12 2010
Items 2 and 12 from that list are my faves.
Stylish but not too obtrusive.
quanganh Dec 05 2010
it’s very useful.thanks
Diane Jan 19 2011
Thanks! Very useful list!
Kay Feb 06 2011
Very useful info, saved me hours. Thanks man!
Paul Feb 17 2011
DHTMLX JavaScript library ( http://dhtmlx.com ) also has some nice navigation scripts (menu, tabs, accordion). Check it if you’re developing desktop-like web app.
Saurabh Gupta Mar 02 2011
Nice Work..!! Thnxx… :)
Flemming Mar 23 2011
It never ceased to amaze me what Jquery can actually do!
pascal aka paco p Apr 10 2011
thank u for ur support,it make my site to look nice.
suresh Aug 04 2011
Excellent examples, it is very helpful for me as am a web designer.
kapil Aug 12 2011
hi very nice tutorial.
i will use your first no.1 MenuMatic bar in my site
thanks
keep it up
Wasim Amin Aug 24 2011
wao nice….content over here actually me looking for a side bar menu got from here
srikanth Sep 22 2011
thanks a lott…very useful
Saiful Sep 30 2011
Most usefull article
Jim Oct 04 2011
Great roundup – Just what i was looking for!
keyuri Nov 18 2011
Thank you so much for showing collection of menu.
Isakjade Aug 30 2012
Thanks for it.
It is a good scripting language.
I’ll definitly use in my website.