Menu

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.

menumatic

View Demo Page

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.

Animated Menu using jQuery

View Demo Page

3. Garagedoor Effect using jQuery

Gaya Kessler presents a wonder JavaScript menu that mimics the real garage door using jQuery.

Garagedoor Effect using jQuery

View Demo Page

4. JGlide Menu

A very unique menu that floats on the page. Users can drag it to a position they desire.

JGlide Menu

View Demo Page

5. Vertical Sliding jQuery Menu

HVDesigns presents a menu that drops down and reveals more links.

Sliding jQuery Menu

View Demo Page

6. Perspective Tabs

You can have scrolling tabs with animation using this technique.

Perspective Tabs

View Demo Page

7. Vertical Digg-like Menu

Antonio Lupetti presents a Digg-like menu that uses simple JavaScript.

Vertical Digg-like Menu

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.

LavaLamp

9. Fisheye Menu

If you’re a big fan of the Mac dock you will enjoy this menu.

Fisheye Menu

10. Simple JavaScript Accordions

A great technique for integrating accordion-style menus into your site.

Simple JavaScript Accordions

View Demo Page

11. Sliding JavaScript Menu Highlight

This sliding hover effect script is an easy technique for highlighting menu items.

Sliding JavaScript Menu Highlight

12. Fading Menu – Replacing Content

This technique allows you to fade in and fade out menu items.

Fading Menu - Replacing Content

View Demo Page

13. Simple Multi-level Drop-Down Menu

A simple JavaScript drop down menu tutorial.

Simple Multi-level Drop-Down Menu

14. Using jQuery for Background Image Animations

A technique for creating animated menus using jQuery and CSS background-position properties.

Using jQuery for Background Image Animations

View Demo Page

15. Mootools Redux

A menu using MooTools that expands the link’s font size when you mouse over the item.

Mootools Redux

View Demo Page

16. HoverAccordion/Sidebar Menu

This is an accordion plugin which can be used as a vertical sidebar menu too.

Using jQuery for Background Image Animations

17. UvumiTools Dropdown Menu

Another JavaScript menu based on MooTools with lots of features.

UvumiTools Dropdown Menu

18. jQuery UI Tabs

Easily separate content using this tab example.

jQuery UI Tabs

View Demo Page

19. Proto.Menu: Right Click Menu

A customizable right-click menu written on top of the Prototype framework.

Proto.Menu: Right Click Menu

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.

Accessible Expanding and Collapsing menu

View Demo Page

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

About the Author

Kawsar Ali is a web designer, graphic designer, and wannabe photographer based in NY, U.S. He’s also the founder of Desizntech, a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter or at his Personal Website.

This was published on May 1, 2009

62 Comments

Hey Kawsar.

Thanks for the include :) Appreciate it!

Gaya

thats great post..many uses and thats special work
very very thanks for ur sharing hope more post like this

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

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…

so tired of seeing the same stupid menus in all these sites…

@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. :/

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.

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.

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.

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

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

thx..It is my great pleasure to visit your website and to enjoy your excellent post here.

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.

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]

nice! where can I download these things?

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

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

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?

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

Thanks! Very useful list!

Very useful info, saved me hours. Thanks man!

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.

Excellent examples, it is very helpful for me as am a web designer.

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

Most usefull article

Great roundup – Just what i was looking for!

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.

This comment section is closed. Please contact us if you have important new information about this post.

Partners