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.
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
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!
4. Make a Mega Drop-Down Menu with jQuery
SitePoint Points out how to make a simple Mega DropDown Menu
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
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
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.
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.
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.
6. Fancy Sliding Tab Menu
This menu is of somewhat different style with the menu on the bottom of the page
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
Black
2. nmcDropDown: A Drop-Down Menu Plugin for jQuery
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.
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.
Download testking NS0-153 tutorials and testking 1z0-051 videos to discover latest WP themes. Also check out latest testking 642-974 web designs.
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
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!!
Awesome menu mate, thanks a lot
Ned
I am looking for a template like http://www.overstock.com with mega menu on the side (not drop down)
Ah! Very useful utilities.
Thanks for sharing.
Hi thank you for sharing I like it
Regards
Great collection of mega drop down navigation, thanks!
Impressive Collection of Drop Down Menus.. Keep it UP!
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
thanks for the list especially for the mega dropdown navigation… really helpful!..
Thanks for this great collection, amazing 🙂
Thanks for all posts.
What do you think about my site mega menu? http://www.duckzland.info, it uses drupal + victheme.com megamenu modules
@Jason It’s looking really very good, fantastically done!!!
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!
Fantastic collection, great stuff!!…
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.
Nice collection. Thanks!
Some of these are just what I have been looking for.
Great resources, thanks a lot! I especially like the nmcDropDown menu 🙂