Collection of mega drop down and multi level menus

Drop down menus have always been a hollah!!! for the designers especially for the beginners. Today in this post we will be providing you some very different style of Menus. You can have look at some old Amazing CSS Menus, creating accordion, dropdown and sliding Mootols Menus and jSlickMenu

Mega Drop Down Menus

Mega drop down menus have many a times proven to be a havoc for designers.

While designing some myself I came across some characteristics that a mega drop down menu should have

1. Two Dimensional Panel
2. Division of various categories in a single panel
3. No scrolling at all!!!!!!
4. Use of Icons could make it look fantabulous

mega_dropdown_menu


1. Mega Drop Down Menus w/ CSS & jQuery

Today a new trend has now began in case of E-Commerce websites where to show a lot of inventory a mega dropdown menu is being used. According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites. These kind of drop down menus should have a subtle time delay when hovering in and out of them. These mega dropdown menus cater to a lot of industries and designers.

mega_dropdown_menu_1

Demo

Overview


2. Pure CSS Mega Drop Down Menu

All Mega dropdown menus rely on JS to function – but, the “best setup” would be, a Pure CSS Mega Dropdown menu, and, with a Javascript hover delay function built in to it. It “can” be done, by incorperating jquery and either of these two plugins – hoverIntent, or Superfish

mega_dropdown_menu_2

Demo

Overview


3. jQuery Mega Menu

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!

mega_dropdown_menu_3

Demo and Overview


4. Make a Mega Drop-Down Menu with jQuery

SitePoint Points out how to make a simple Mega DropDown Menu

mega_dropdown_menu_4

Demo

Overview

Making easy dropdown menus and also nested level menus


1. 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. The main menu bar consist of a CSS list, while the drop down menus are simply regular DIV tags on page. Thanks to JavaScript, the menu supports subtle but important effects such as delay before menu disappearance, and repositioning of the menu if too close to any one of the four corners of the window. The entire menu, including images and external files, is extremely compact. Thanks to CSS, the menu can be styled with a different “theme” easily, just by modifying a few CSS attributes and changing a couple of images’ colors

dropdown_menus_1

Demo and Overview


2. CSS Express Drop-Down Menus

CSS Express Menus are a PVII solution that will help you produce a quick (express) CSS drop-down menu without some of the limitations found in some other “pure” CSS menus. What the heck is a pure CSS menu? Pure CSS menus use the hover pseudoclass, on the LI tag, to hide and show drop-down menus without JavaScript. Sounds great in theory, but in practice it’s not so pure. Browsers used by the vast majority of humans do not support this technique and must be served a small script to simulate li:hover

dropdown_menus_2

Demo

Overview


3. Sexy Drop Down Menu w/ jQuery & CSS

Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

dropdown_menus_3

Demo

Overview


4. JavaScript Dropdown Menu with Multi Levels

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.

To initialize a drop down menu use the following code:

var menu=new menu.dd(‘menu’);
menu.init(‘menu’,'menuhover’);

You must create a new menu object before initialization. The parameter taken by menu.dd is the variable name used for the object. The object.init function takes 2 parameters: the id of the menu unordered list and the id of the initially sorted column (optional). If you want to exclude a column from sorting then add class=”nosort” to the appropriate table header. The styling of the table is totally customizable via CSS.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

dropdown_menus_5

Demo

Download


5. jQuery & CSS Example – Dropdown Menu

Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. 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.

dropdown_menus_6

Demo and Overview


6. Fancy Sliding Tab Menu

This menu is of somewhat different style with the menu on the bottom of the page

dropdown_menus_4

Demo

Overview


jQuery Dropdown Menus

Features

* Full cross-browser compatibility
* Fully accessible even when javascript is turned off, as a pure css menu
* Search engines optimized
* Clear unordered list (LI and UL HTML tags) structure of jQuery dropdown menu
* Easy to setup and update
* Fantastic animation and transition effects
* Multiple pre-desinded color schemes
* Completely customizable styling with CSS
* Powered by jQuery
* Extremely small – 3kb uncompressed

1. Olive Drab

jquery_dropdown_menus_1

Demo and Overview

Black

jquery_dropdown_menus_2

Demo and Overview


2. nmcDropDown: A Drop-Down Menu Plugin for jQuery

jquery_dropdown_menus_3

Example

Overview


3. jQuery plugin: Accordion

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.

jquery_dropdown_menus_4

Demo

Download


4. jQuery Rounded Menu

This jQuery based plain css drop down menu is very simple illustration that you don’t need any dramatic coding to achieve simple 2 level menu.

jquery_dropdown_menus_5

Demo

Overview

Download testking NS0-153 tutorials and testking 1z0-051 videos to discover latest WP themes. Also check out latest testking 642-974 web designs.

A total football nerd, he loves designing to the core and also likes to get his hands on some programming. He is the Co-Founder of ArtAtm. He hails from India. You may want to Follow Him On Twitter

Jitu – who has written posts on Artatm - Creative Art Magazine.


19 Responses to “Collection of mega drop down and multi level menus”
  1. VicTheme

    I wrote a nextgeneration megamenu modules for Drupal 7. It has ability to use column, embed any kind of blocks, auto repositioning, 4 directions (left, right, top, down), multiple megamenu block in a page, drag and drop configuration for layouts, different animations, icons in menu, tpls per menu column and many more.

    take a look at http://demo7.victheme.com/node/75

    or purchase it from
    http://www.victheme.com/product/vt-supermenu-premium-menu-modules

  2. desktop wallpapers

    Nick, thanks so much for posting this. I’ve spent hours trying to figure out why IE6+7 weren’t showing my list numbers for an . Thanks!!

  3. Ned

    Awesome menu mate, thanks a lot
    Ned

  4. steven song

    I am looking for a template like http://www.overstock.com with mega menu on the side (not drop down)

  5. Prodyot

    Ah! Very useful utilities.
    Thanks for sharing.

  6. prestacommerce

    Hi thank you for sharing I like it
    Regards

  7. Vijesti

    Great collection of mega drop down navigation, thanks!

  8. Sumit nagpal

    Impressive Collection of Drop Down Menus.. Keep it UP!

  9. shaficque Guma

    i have been looking for suitable drop down menu for my website finally i have got what i have been looking for 2 years. God bless u

  10. harry spartax

    thanks for the list especially for the mega dropdown navigation… really helpful!..

  11. Croatia Istria

    Thanks for this great collection, amazing :)

  12. dar?ca çiçek

    Thanks for all posts.

  13. Jason

    What do you think about my site mega menu? http://www.duckzland.info, it uses drupal + victheme.com megamenu modules

    • Jitu

      @Jason It’s looking really very good, fantastically done!!!

  14. Susanna Schnieder

    I am so glad I found your blog! Information like this is always useful to me and helps me better my own blog. Thanks so much!

  15. web

    Fantastic collection, great stuff!!…

  16. Body Combat DVD

    I am thankful to a person for sharing this publish along with all of us. I’ve already been in search of this post and found the post the actual proper time. We appreciate for your own perform.

  17. DesignrNews

    Nice collection. Thanks!
    Some of these are just what I have been looking for.

  18. NetKit

    Great resources, thanks a lot! I especially like the nmcDropDown menu :)

Leave a Reply