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

---

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.

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

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!

Demo and Overview

---

4. Make a Mega Drop-Down Menu with jQuery

SitePoint Points out how to make a simple Mega DropDown Menu

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

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

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.

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.

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.

Demo and Overview

---

6. Fancy Sliding Tab Menu

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

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

Demo and Overview

Black

Demo and Overview

---

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

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.

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.

Demo

Overview

Related posts:

1. Amazing css menu Collections
2. jSlickmenu: A jQuery plugin for slick CSS3 menus
3. Creating Accordion, Dropdown and Sliding Menus in Mootools
4. 14 Easy to Implement Drop Down Menu Solutions
5. Photo gallery Using CSS3 and JQuery