Development

Multilevel Drop Down Navigation Menus: Examples and Tutorials

April 17th, 2008

Navigation menus are the most important element one should pay attention when designing a website. Web-developers can create user-friendly horizontal or vertical navigation menus using CSS. Javascript makes it possible to create more interactive, more responsive and more flexible navigation to any website.

This article presents over 25 (horizontal and vertical) multilevel drop down menu built using Javascript and CSS which you can use in your future projects. Also you will find some useful tutorials at the end of this post where you can use to start building your own multilevel navigation menu.

You might check out these posts as well:


Horizontal and vertical drop down menus

1) Drop Down Tabs (5 styles)– Drop Down Tabs is a horizontal CSS tabs menu that supports a second level drop down menu for each of its tabs.


2) Professional Dropdown


3) Multi-level effect menu– Is a very configurable javascript/css hybrid dropdown menu that is capable of producing simple menus(both horizontal and vertical).


4) FastFind Menu– A jQuery nested menus, based on dynamic “AJAX” responses. The menu can also be dragged/dropped.


5) jQuery SuckerFish– Replicate Suckerfish Menus.


6) Fancy Sliding Tab Menu using script.aculo.us


7) List Based Menu with Images– This is a menu based on an unordered list (<UL><LI>). It makes the menu easy to use and friendly to search engines.


8 ) Slide down menu– A slide menu based on an unordered list (<UL><LI>).


9) Dropdownmenu made with scriptaculous/prototype– A multi level drop down menu.


10) Suckerfish-style menu plugin for jQuery– This demonstrates a two-tiered horizontal menu that displays the path to the current page when the menu is in its idle state.


11) Building a dynamic drop down menu


12) onMenuOpen onMenuCollapse Events– This is a one-time effect that shows off the menu opening up and firing an event, and then finishing with another event.


13) Mootools menu with accordion and effects– This simple menu has a neat effect by hovering over the links, and opens a submenu with an accordion.


14) Mootools Unlimited Drop Menu


15) Creating an Outlook Navigation Bar– Using the ListView and Accordion Controls


16) Simple CSS vertical menu Digg-like– This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu.


17) Drop down menu with Prototype– A unique drop down navigation that recursively applies a function to an li that toggles the visibility of a nested ul element.


18) Drop down menu with nested submenus– Using CSS and a little JavaScript


19) Drop down menu with jquery– A drop down animated menu example made with jquery


20) jdMenu Hierarchical Menu– The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications.


21) jQuery plugin: Treeview– Lightweight and flexible transformation of an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements.


22) Drop Down menu


23) Accessible fold-out menu


24) Accordion Menu script– This example illustrates how you would add a collapsible sub level.


25) Complex Dynamic Lists– Using an unordered list, to display a hierarchical structure of a complexity that would be very hard to achieve with dynamic select boxes.


26) Chrome CSS Drop Down Menu– Chrome Menu is a CSS and JavaScript hybrid drop down menu. It’s easy to configure and search engine friendly.


Drop Down Menu Tutorials

CSS Pop-Out Menu Tutorial


CSS Express Drop-Down Menus– CSS Express menus should only be used in a horizontal orientation with a single drop-down level.


Son of Suckerfish Dropdowns– An accessible, light weight (just 12 lines of JavaScript), with great compatibility and can have multiple-levels.


Drop Down Menu Generator

Izzymenu– With an impressive Ajax interface, you can build your own CSS drop down DHTML sub-menu in minutes without writing a single line of code.


The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: , ,

Sort by:   newest | oldest | most voted
Siddharth
Guest
8 years 4 months ago

Nice tutorial here, I use Dreamweaver for web design and in My opinion, sub categories navigation is not so good looking in vertical menu. But I like them as drop down in horizontal navigation. Off course who like opening a door and finding one more door in it? :-)

jeremy
Guest
jeremy
8 years 4 months ago

People are still using multilevel drop down menus?

Gunner Si
Guest
8 years 4 months ago

Sweet post! An option for every use, i was just looking at these at work today. These are a pain in the @ss to handcode! Thanks for the linkage

chris
Guest
8 years 4 months ago

sweet set! now to show off mine:
http://www.hkturnaround.com

built using scriptaculous/prototype. Thought i’d spice things up a bit!

Anthony Ettinger
Guest
8 years 4 months ago

Great solutions…I find the 2nd level tabs don’t work well, since IE6 doesn’t like punching out of the parent’s container.

knurów
Guest
8 years 4 months ago

thanks, I was looking for drop down menu and I found this list :)

Acronyms
Guest
8 years 3 months ago

Drop downs are old school.

C
Guest
C
8 years 3 months ago

Please don’t use multi-level drop downs. They are html evil incarnate! If you find yourself in a situation where you have no choice, you took a wrong turn somewhere and need to go back and retrace your steps.

D
Guest
D
5 years 4 months ago

Mr.C. You are right. After having incorporating HVMenu, now I am finding it as a trouble. When I work with CSS for printing purpose, the multilevel HVMenu gives me headache as it is not hiding. Only when I want to overcome the problem, I found your comment!. How exactly it is true. As you said, now I am retracing my steps by wasting a lot of time.

C
Guest
C
8 years 3 months ago

I should say that single level drop downs are ok and in many places a good design choice, just avoid taking them multi-level.

Ajay kamat
Guest
8 years 3 months ago

cool !!
realy gud menu.

thanks buddy.

Ajay Kamat

Baroda Design
Guest
4 years 6 months ago

This is really awesome. very usefull one.. great work

M.S. Babaei
Guest
8 years 3 months ago

great thanks!

it’s very useful!

I worked for hours and hours and make nothing

thanks again!!!

.wired
Guest
8 years 2 months ago

Wanted to add my dropdown navigation tutorial, too: http://blog.masterplane.de/informationstechnik/programmierung/css/vertikale-aufklappnavigation

Greetings

zipper
Guest
zipper
8 years 2 months ago

very cool)) thanks so much!!!

Chris
Guest
8 years 1 month ago

what about accessibility (508) and JAWS reading submenu items? I can’t get the readers to “see” the submenus. I have run into this problem with no solution.

Subhash
Guest
Subhash
8 years 1 month ago

where are the files to download in “Mootools menu with accordion and effects”.

kacupeng
Guest
8 years 1 month ago

i have question for you !!!

can i put professional drop down menu in my blog site???
how can i get it ???
could you tell me please how to put drop down menu in my blog ???

thanks before

Ahmad
Guest
7 years 10 months ago

I do not know what to say really! These menus are truly awesome, and I never seen most of them.. thanks!

Eric
Guest
7 years 9 months ago

great list.
thanks

Mark
Guest
7 years 9 months ago

Very useful info. Thanks for sharing!

Ixalmida
Guest
Ixalmida
6 years 9 months ago
I’d like to add my 2 cents on multi-level drop-downs. I agree that in most cases they make a site too “busy.” However, they have their place and appeal to a certain audience (especially in b2b apps). For example, if you’ve ever been on the Dell Premier site, you know you would KILL for a multi-level nav menu so you don’t have to wait for their agonizingly slow pages to load. I think the important thing is not to FORCE a user to use multi-level navigation. In other words, every item in the header menu should be clickable. The same… Read more »
Atle
Guest
6 years 8 months ago

Great list of menus. Thanks! :)

feald
Guest
6 years 8 months ago

Great resource , thanks for menus !

Don
Guest
6 years 8 months ago
I have downloaded your scriptaculous multi level dropdown menu and converted it for my website donsgarden.co.uk. It is working, but firebug reports:- “uncaught exception: script.aculo.us requires the Prototype JavaScript framework >= 1.6.0.3 Line 0″” Safari reports an RJS error. When I replace the prototype that I am using (1.6.0.1) to 1.6.0.3 the menu does not work. I developed the menu on a local copy using Mongrel, Ruby 1.8.7, Rails 2.3.4, Scriptaculous 1.8.3, Prototype 1.6.0.1. The javascripts came with the scriptaculous download. Firebug also does report an uncaught exception. My website host server is using Ruby 1.8.6 and Rails 2.2.2. Is… Read more »
Don
Guest
6 years 8 months ago

I solved my problem. What I did was to create a blank rails application and copy all the javascript files to my website overwriting those I downloaded with Scriptaculous. Bingo no more errors. The fact that my ISP server is usingh 2.2.2 and not 2.3.4 does not seem to matter.

Archit Shah
Guest
6 years 8 months ago

its great 1

Pisit
Guest
Pisit
6 years 7 months ago

Appreciate, thank for the sharing

selva comments
Guest
6 years 7 months ago

Thank you … this has me very helped.useful list

Mathan
Guest
6 years 7 months ago

useful information for nav menu.
Thanks for sharing this tut..

sabari
Guest
sabari
6 years 7 months ago

simply good!!!!!!!!! my requirement s over

ajans
Guest
6 years 6 months ago

nice i like it..

Mature singles dating
Guest
6 years 6 months ago

Great list! Navigation menu are greatly important for usability purposes and creating a user-friendly website.

Eni
Guest
6 years 5 months ago

I’m still trying…
What a nice view, by adding this dropdown menu to my blog…

Ali
Guest
6 years 5 months ago

Good recommendation, Many dropdown menu tutorial on sites… but yours are the best

John
Guest
John
6 years 5 months ago

Great Post…

Vijendra Mishra
Guest
6 years 5 months ago

Nice Post with great resources… thanks

Marilee Lindenberg
Guest
6 years 5 months ago

Dreamweaver has been lately my personal goto application for years. I truly don’t know what I would undoubtedly do without having it. There were moments when I initially started out making use of the program, and I thought it was way too complicated. Now I fly around it, and it has become a strong asset in my personal tool box. Nonetheless thanks for the article.

Giri
Guest
Giri
6 years 5 months ago

Very useful.Good work

Heilo
Guest
Heilo
6 years 4 months ago

Sweet. Found what I was looking for :)

martin
Guest
martin
6 years 4 months ago

hai ur posting is very useful for us

avosoft
Guest
6 years 4 months ago

just what i needed. thanks

Sitthykun
Guest
6 years 4 months ago

cool ….

Timothy Zhu
Guest
6 years 3 months ago

Very nice selection of drop down nav menus. One of them happens to be exactly what I’m looking for. Thanks!

extendstudio
Guest
6 years 3 months ago

You can see more samples on horizontal or vertical drop down menu for Creative DW Menus which is a Dreamweaver extension. Here are the samples extendstudio.com/creative-dw-menus-pack/samples.html

Rana Mukherjee
Guest
Rana Mukherjee
6 years 3 months ago

you can see drop down menu width background image example.

yinka
Guest
6 years 3 months ago

Thanks. This has saved me a lot of work.

Student Brands
Guest
6 years 3 months ago

Thanks for the great information. I hope to be back soon. I have book marked it keep posting. Thanks again.

xtin
Guest
6 years 2 months ago

very nice info

rateeeh
Guest
6 years 2 months ago

very helping, thank you…

Web graphic designer, kanpur web designer, logo design india
Guest

wow graet meneu cllaetion

polskie biuro ksiegowe
Guest
6 years 2 months ago

wow! everything in one place – great share! thanks my friend :)

Mehmet demiray
Guest
6 years 2 months ago

Nice menus thanks(:

Emin
Guest
6 years 2 months ago

Hi. I need number 8 but
I want to one more

Can you help me.

Bineet chaubey
Guest
6 years 2 months ago

really nice tutorial .but i can not find such type menu those i want

Tech & IT News India
Guest
6 years 2 months ago

Thank you for a useful info, have a good resource in your blog.

zinmarwin
Guest
zinmarwin
6 years 2 months ago

Thanks you for your share.

prem
Guest
6 years 2 months ago

Great!

Thanks

Hannah
Guest
6 years 28 days ago

these are some awesome menu tutorials. Thanks for sharing.

Renae
Guest
Renae
5 years 11 months ago

Hi i love the content! However, the code/info for #8 slide-down menu doesn’t work. It pulls up a page with weird info. Thanks!

cihip
Guest
5 years 11 months ago

Thanks you for your share..

Subbu
Guest
5 years 11 months ago

Good collection..nice effort..Do you know of pure css menu which is expandable?

Ritz Infotek
Guest
5 years 11 months ago

Awsome collections! I would like implement the above menu so the submenu will go up instead of down. Any idea how to do this.

Vinayak
Guest
5 years 10 months ago

Hey thanks!!!

very good to c such awesome menus!!!

tecnico
Guest
5 years 9 months ago

Thank for this article, is very util for my new project.

Biju Subhash
Guest
5 years 8 months ago

nice collections…
thank you for sharing…

here a link for another jQuery menu:
http://www.bijusubhash.com/blog/redbrown-drop-down-menu-using-jquery-and-css

steff
Guest
5 years 7 months ago

very nice collection, but i was wondering if the horizontal menus can be converted to vertical menus? i need this for my oscommerce! any idea?

trxBox
Guest
5 years 7 months ago

Very useful.Good work

BrockN
Guest
5 years 6 months ago

I have written a jQuery plugin that supports infinite level of unordered lists. It is easy to implement, and has been tested in Internet Explorer 6+, Firefox, Safari, and Chrome.

John Chan
Guest
John Chan
5 years 6 months ago

Please help!!!

I used the menu (8) described but the hyper-link inside the list items does not go to anywhere. Why? The link has no respond when I clicked. How to enable the link?

8 ) Slide down menu- A slide menu based on an unordered list ().

Danismanlik
Guest
5 years 6 months ago

thnks for share is very util for my new project.

Henning Larsen
Guest
5 years 6 months ago

Cool site and lots of nice menus

Ginoa Andrean
Guest
5 years 6 months ago

nice information. the explanation is very clear with clear picture too. great!

Megha shah
Guest
Megha shah
5 years 6 months ago

Hey thanks for all dis information…
it will be so usefull 2 me….

Som
Guest
5 years 4 months ago

Nice tutorial .I need to make a drop down menu for my Website and your tutorial is really nice . Thanks a lot for the support.

cin takvimi
Guest
5 years 4 months ago

I also believe thus, perfectly composed post! .

Nithu
Guest
Nithu
5 years 3 months ago

Great collections and very useful.

LANDOIS
Guest
5 years 2 months ago

Very nice.

tommy
Guest
5 years 1 month ago

Thanks for the menus. I love them, especially the second one.

LOGANATHAN
Guest
LOGANATHAN
5 years 4 days ago

Thank you the menu The explanation is very clear with clear picture too, and very use full

Luke Tupas
Guest
Luke Tupas
4 years 11 months ago

nice!!!

Ankur
Guest
Ankur
4 years 10 months ago

if you want to create a dropdown menu in html with red theme,
see this, on here you can also download source code:

http://www.authorcode.com/dropdown-menu-in-html/

Andy
Guest
4 years 9 months ago

Very cool! Thank you very much!!!

akshay
Guest
akshay
4 years 8 months ago

thank you.. very usefull one.. great work

Dheeraj Bansal
Guest
4 years 8 months ago

This is really awesome. hmm trying to do something new in html navigation menu

sharavanakkumar
Guest
sharavanakkumar
4 years 7 months ago

simply superb !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Polly
Guest
4 years 6 months ago

Hi – I am trying to find a nice drop down for my site – My site covers many cities; I would like to have a drop down menu for the cities on my site – so it would be easier to view the information – would this site help me? thanks

Udhaya47
Guest
4 years 6 months ago

Nice post..Thanks a lot….

sumit
Guest
4 years 4 months ago

i was searching for drop down menu code in html. I found this tutorial. Very good explanation. Please tell me the code also to create drop down menu.

sumit
Guest
4 years 4 months ago

I need this urgently. Please help.

Shilpi
Guest
Shilpi
4 years 4 months ago

Awesome……

Kathirason
Guest
4 years 2 months ago

great collections.. but i need ajax based menu..

ayush
Guest
4 years 2 months ago

i m web developer. i want use of java script in every type. so please give me some notes for java script

thanks.

keshav singh
Guest
keshav singh
4 years 2 months ago

gr8 collection man thank you for sharing , this is very useful for me

Michael
Guest
Michael
4 years 2 months ago

This is really nice one

Alexander
Guest
4 years 1 month ago

The Drop Down Menu Generator is great.

Many thanks

Bedemand
Guest
4 years 1 month ago

Thanks for this great list. I was looking all around the web for this.

Panagiotis
Guest
3 years 11 months ago

This is a very nice post. Thanks for sharing!

PA

Grafiker
Guest
Grafiker
3 years 9 months ago

Awesome collection – thanks!

Geek
Guest
Geek
3 years 9 months ago

Nice!

Medha
Guest
Medha
3 years 8 months ago

I am looking for a selectable dropdown with subcategories. I need to pull the subcategories id into the select box.

How do i do?

Frankie
Guest
3 years 5 months ago

I love your website tutorial its very educate. It gets even better as you give options
to download them. Regards Frankie

rakesh
Guest
rakesh
3 years 4 months ago

I love your website tutorial its very educate. It gets even better as you give options

wpDiscuz