Total Followers 132,503
Hello again, it’s time for comprehensive programming article. Here you’ll find 38 mainly jquery and CSS based drop-down or just multi level menu tutorials with down loadable files and explanations as well. My favorite here is the first pick – Outside the box with very unique navigation menu. It’s always good to have such reference articles in your bookmarks and when you have to create some really big website with a lot of content and menu sections – just return here. Shorten your developing process with already premade menus, which can be easily modified with little touch of CSS.
But well, also be aware when each code has been created, has it got some updates through time? In our development niche standards, technologies change so quick sometimes when you decide to use specific menu..it’s very hard to implement it and at the end you’ll even may need to rewrite code just because of incompatibility so be cautious!
Here you’ll find mainly free solutions, but I would also suggest for some special occasions, quick projects to consider some of design/code marketplaces, where you can buy optimized,documented and update codes for really cheap prize. I can assure quality is high,otherwise marketplaces won’t get so popular..and my experiences are only positive and I really am ready to spend 5-10 for important code snippet saving probably hours of my time. I myself have tried CodeCanyon and Mojo-Themes marketplaces, I am sure there are many more out there, but these two are definitely the ones I recommend.
At least I am doing my designing process like this -
What’s your experiences?
And why you are figuring answers – enjoy this quality article!
This tutorial will cover a few ways to do just that with OS X style docks and stacks navigation.
In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.
Navigation is compacted with the use of simple drop-down menus.
A follow on from the simple single level circular menu, this one adds a sub menu level of smaller icons in a circular pattern within the top level circle. There is also the facility to add a simple description of each icon.
This Mega Drop Down Menu is perfect for creating unique menus easily. It’s CSS / XHTML only, there is absolutely NO javascript.The content can be organized in 1, 2, 3, 4 or 5 columns based on the 960 grid system. This item comes with 9 color variants and a detailed documentation to help you start with your brand new menu.
Nice tutorial showing you how to create a login drop down with Twitter style using jQuery.
This tutorial will show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.
I’ve featured this Janko’s tutorial some time ago, but sometimes I will repeat myself, since this article is completely dedicated to showcase advanced drop down menus. Very detailed and well written tutorial, with drop-down search options narrowing and targeting search by checking options. Menu is done completely using just CSS, structure is visually describet in the image below:
UberMenu is a user-friendly, highly customizable, responsive Mega Menu WordPress plugin. It works out of the box with the WordPress 3 Menu System, making it simple to get started but powerful enough to create highly customized and creative mega menu configurations.
With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the preview or you can create a login panel in your drop down!
Just simple CSS menu.
Very old drop-down tutorial from year 2004, but if you are starting out – very useful tutorial and example.
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and more features.
This multi-level drop down menu script weighs in at only 1.2 KB. It features animation, active header persistence, easy implementation and multiple instance support.
This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!
MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu
This Mega Drop Down Menu Complete Set is perfect for creating unique menus by using one of the 9 jQuery effects and one of the color schemes.
Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair.
Super menu pack is a collection of 10 cool menus, 5 in pure css and 5 using jQuery framework for customize or layout with your websites or applications and projects.
It’s perfect for anyone who wants to give a special touch to their designs or find a starting point. I tried to create a collection as varied as possible in style and appearance to give you choice. Thinking in design working with code.
All menus are easy to customize from CSS . In each file you will find detailed coments.
This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.
Very stripped down code and minimal styling, yet still dropdown menu has all the functionality typically needed.
One problem with HTML forms is it is hard to style the elements to fit into your design. The tutorial will show you how to style the hardest of them all, the select box.
Newer version of previous iPod style menu.
These Menus feature 3 different dropdown styles, Product view, multi-column view and single column view, it has different classes for different levels and could support endless dropdowns. This files does support multiple browsers, and includes a PSD for user customization.
A fresh and powerfull menu solution it is easy to customise, 11 fresh styles, 6000+ Icons you can use perfect for your main navigation to make it looks good and very appealing.
This menu turns a nested UL list into a horizontal drop line tabs menu. The top level tabs are rounded on each side thanks to the use of two transparent background images, while the sub ULs each appear as a single row of links that drop down when the mouse rolls over its parent LI.
Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor. Mega cool!
Create your own drop down menu with nested submenus using CSS and a little JavaScript.
The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications.
A lot of free advanced CSS and Javascript drop down menus are available here. There are also instructions and advices how do use and modify them.
Choose from dozens ready styles or create your own menu style. They are low in file size, so won’t consume a lot of bandwidth from your hosting. IzzyMenu, online menu generator is the best solution for amateurs and professionals!
In this tutorial you will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.
jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.
Get The Only Freelancer crash course you will ever need to read!
Dainis Graveris is 23 years old blogger and designer, founder of 1stWebDesigner, now more silently managing everything behind the scenes. He usually hangs out in Twitter tweeting design related links and chatting with people. If you have any questions or feedback that's the best place to start! Cheers!
Thursday, April 19th, 2012 15:56
Thanks for great list. I had also developed a nice drop-down vertical menu for my site. Feedback from an expert would be highly appreciated.
Regards,
Naimesh Patel
Thursday, April 5th, 2012 07:59
The CSS3 Mega Drop Down Menu is by far the best one in the list.
Thursday, December 22nd, 2011 20:35
MENUMATIC: Hi, first off all, great work, but we are having some issues under IE.
Animation is not displaying (it shows sub-buttons, without transition) and the rounded corners are not showing.
This happends also with the demo you have online in your site (not only in my site).
I’m testing it with IE 9.
Thanks in advance for your time and help.
Regards,
Wednesday, November 2nd, 2011 20:35
Excellent!
Thank you so much, I’v used some plugins from this post.
May I add another one: SlipSlap!
It’s a full CSS3 and JQ plugin, looks great and works like a charm.
Saturday, October 1st, 2011 12:11
Outstanding Selection. There could not a better resource for a designer to find such excellent drop-down menu examples all at a single place. Thanks for the composition and great selection.
Friday, June 17th, 2011 12:57
Hi, This is wonderful. Is it possible to use one of these drop downs in my website ? I mean is it free or what I will have to do to use this ?
Thanks
Monday, March 28th, 2011 21:39
Yeeeeessssss!!!!!!! I love it… i was looking for methods that work in Firefox and IE… Thank you you save my life in mostly my work…
Saturday, March 26th, 2011 06:46
Awesome multi-level menu solutions! Broadened my choices. ;)
Wednesday, February 16th, 2011 09:02
Hi,
I was wondering if these drop down menus can be used within the Main Article or Main Content of a page instead of the menu for example for a taxonomy tree (for biodiversity) or for people to be able to navigate through how different things relate to each other?
Saturday, November 20th, 2010 11:02
Yes, I have rectified it.
In the javascript there is a function call to this link…just comment it..it will work fine.
Thursday, October 28th, 2010 00:27
I have used number 22 Smooth Navigational Menu on several sites now. Very easy to use and I found it here. Thanks a ton!
Wednesday, October 20th, 2010 04:59
i like your post, thx u very much
Thursday, September 2nd, 2010 20:48
Very good compilation.. was useful..
I am looking for a simple css based tree menu (without using javascript)… do have any references?
Friday, August 6th, 2010 14:04
Really cool …
Is there sample code for 2 blocks with tree add and remove the nodes from either way.
Saturday, July 17th, 2010 07:54
This site is Good Learning jquery and Ajax
Friday, May 14th, 2010 11:24
Love it . Excellent guide. but i still cant find any vertical menu which opens up on the left side, why all of them are on the right ??
Monday, April 19th, 2010 18:19
Do any of these menus, besides #16, validate?
Monday, April 19th, 2010 14:30
Super list! Thanks a bunch!
Its good to see sites that are as informative as this one, keep it up!
I use a tool called AllWebMenus that you might find helpful for creating your website’s menu. They also maintain a nice list of products for creating modal windows, tooltips, drop down menu trees, etc.
Thursday, March 18th, 2010 03:47
Always on the look out for a jscript css drop down menu. Can’t wait to try some of these out. Thanks!
Tuesday, March 9th, 2010 23:18
Some really great menus in here, even better that they are html and css with jQuery as Google will be able to see the content rather than developers making flash banners!
Tuesday, March 9th, 2010 15:45
This is a great list,thanks for sharing. I can used it in my incoming project especially the DIGG style drop down list
Monday, November 2nd, 2009 19:57
Wow excellent article. I found everything in one place. I’m having problems with smallicons which are supposed to act like trigger links to open the slider…
Sunday, September 20th, 2009 15:01
Really fantastic roundup, thank for including my tutorials :)
Sunday, September 20th, 2009 09:21
Thanks very nice Menus =)
Monday, September 7th, 2009 03:12
I used the Smooth Navigational Menu from dynamic drive before, it is very easy to learn and customize.
Sunday, September 6th, 2009 22:41
Nice Article, just stumble !
Sunday, September 6th, 2009 20:04
The sum total of all these drop down menus are pretty sexy to me. Thanks for hooking them up.
Sunday, September 6th, 2009 07:36
I like sexy drop down menu because of it’s elegant look. Circular menu is something new to me. great post dainis
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Dilip
Friday, August 6th, 2010 14:04
Really cool …
Is there sample code for 2 blocks with tree add and remove the nodes from either way.
Subbu
Thursday, September 2nd, 2010 20:48
Very good compilation.. was useful..
I am looking for a simple css based tree menu (without using javascript)… do have any references?
Sebastian
Monday, April 19th, 2010 14:30
Super list! Thanks a bunch!
Its good to see sites that are as informative as this one, keep it up!
I use a tool called AllWebMenus that you might find helpful for creating your website’s menu. They also maintain a nice list of products for creating modal windows, tooltips, drop down menu trees, etc.
Janko
Sunday, September 20th, 2009 15:01
Really fantastic roundup, thank for including my tutorials :)
Ed Baxter
Tuesday, March 9th, 2010 23:18
Some really great menus in here, even better that they are html and css with jQuery as Google will be able to see the content rather than developers making flash banners!
anand
Friday, May 14th, 2010 11:24
Love it . Excellent guide. but i still cant find any vertical menu which opens up on the left side, why all of them are on the right ??
Asuka
Monday, November 2nd, 2009 19:57
Wow excellent article. I found everything in one place. I’m having problems with smallicons which are supposed to act like trigger links to open the slider…
Marce
Sunday, September 20th, 2009 09:21
Thanks very nice Menus =)
Lam Nguyen
Monday, September 7th, 2009 02:23
Thanks for adding my tutorial :D
Jason Zuckerman
Sunday, September 6th, 2009 20:04
The sum total of all these drop down menus are pretty sexy to me. Thanks for hooking them up.
Thomas
Sunday, September 6th, 2009 22:41
Nice Article, just stumble !
Dicky
Monday, September 7th, 2009 03:12
I used the Smooth Navigational Menu from dynamic drive before, it is very easy to learn and customize.
Sandy
Saturday, July 17th, 2010 07:54
This site is Good Learning jquery and Ajax
Ricky
Wednesday, October 20th, 2010 04:59
i like your post, thx u very much
Razibul Hassan
Saturday, October 1st, 2011 12:11
Outstanding Selection. There could not a better resource for a designer to find such excellent drop-down menu examples all at a single place. Thanks for the composition and great selection.
Subash
Friday, June 17th, 2011 12:57
Hi, This is wonderful. Is it possible to use one of these drop downs in my website ? I mean is it free or what I will have to do to use this ?
Thanks
Guy Nakash
Wednesday, November 2nd, 2011 20:35
Excellent!
Thank you so much, I’v used some plugins from this post.
May I add another one: SlipSlap!
It’s a full CSS3 and JQ plugin, looks great and works like a charm.
Estefi
Thursday, December 22nd, 2011 20:35
MENUMATIC: Hi, first off all, great work, but we are having some issues under IE.
Animation is not displaying (it shows sub-buttons, without transition) and the rounded corners are not showing.
This happends also with the demo you have online in your site (not only in my site).
I’m testing it with IE 9.
Thanks in advance for your time and help.
Regards,
Naimesh Patel
Thursday, April 19th, 2012 15:56
Thanks for great list. I had also developed a nice drop-down vertical menu for my site. Feedback from an expert would be highly appreciated.
Regards,
Naimesh Patel
Dainis Graveris
Friday, April 20th, 2012 11:15
Hm, I don’t see dropdown menu on your site.
Vacanta
Thursday, April 5th, 2012 07:59
The CSS3 Mega Drop Down Menu is by far the best one in the list.
Abbey Fields
Monday, March 28th, 2011 21:39
Yeeeeessssss!!!!!!! I love it… i was looking for methods that work in Firefox and IE… Thank you you save my life in mostly my work…
Raisa
Wednesday, February 16th, 2011 09:02
Hi,
I was wondering if these drop down menus can be used within the Main Article or Main Content of a page instead of the menu for example for a taxonomy tree (for biodiversity) or for people to be able to navigate through how different things relate to each other?
Tony
Thursday, October 28th, 2010 00:27
I have used number 22 Smooth Navigational Menu on several sites now. Very easy to use and I found it here. Thanks a ton!
Rajeshdan
Saturday, November 20th, 2010 11:02
Yes, I have rectified it.
In the javascript there is a function call to this link…just comment it..it will work fine.
Azhar Kamar
Saturday, March 26th, 2011 06:46
Awesome multi-level menu solutions! Broadened my choices. ;)
S May
Thursday, March 18th, 2010 03:47
Always on the look out for a jscript css drop down menu. Can’t wait to try some of these out. Thanks!
gautam hans
Sunday, September 6th, 2009 07:36
I like sexy drop down menu because of it’s elegant look. Circular menu is something new to me. great post dainis
Bill Dixon
Monday, April 19th, 2010 18:19
Do any of these menus, besides #16, validate?
Kaiser
Tuesday, March 9th, 2010 15:45
This is a great list,thanks for sharing. I can used it in my incoming project especially the DIGG style drop down list