20 Excellent JavaScript Navigation Techniques and Examples

May 1 2009 by Kawsar Ali | 61 Comments | Stumble Bookmark

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.

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.

View Demo Page

3. Garagedoor Effect using jQuery

Gaya Kessler presents a wonder JavaScript menu that mimics the real garage door 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.

View Demo Page

5. Vertical Sliding jQuery Menu

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

View Demo Page

6. Perspective Tabs

You can have scrolling tabs with animation using this technique.

View Demo Page

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.

View Demo Page

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.

View Demo Page

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.

View Demo Page

15. Mootools Redux

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

View Demo Page

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.

View Demo Page

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.

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.

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.

61 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

Disain

March 19th, 2010

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

Zawuni

April 12th, 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

April 28th, 2010

The links for #2 are broken, sadly it appears the blog has disappeared. =/

Calvin Omari

May 7th, 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 25th, 2010

nice! where can I download these things?

ziggy

June 2nd, 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

June 7th, 2010

Thanks its nice

wp programmer

June 22nd, 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

June 23rd, 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

July 31st, 2010

Great thanks a lot guys

shreyansh

August 22nd, 2010

Thank you so so much.
i will help me a lot in my JAVA project in college.

shreyansh

August 22nd, 2010

it*

Abhijit

September 3rd, 2010

useful content………..but needs updation…..

quanganh

December 5th, 2010

it’s very useful.thanks

Diane

January 19th, 2011

Thanks! Very useful list!

Kay

February 6th, 2011

Very useful info, saved me hours. Thanks man!

Paul

February 17th, 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.