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
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
2. CSS Express Drop-Down Menus
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.
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’);
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
* Full cross-browser compatibility
* 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
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.