Studies show that navigation’s tend to get the most visual attention when a user first visits a site. That’s why every web designer wants to make the navigation of the website eye catching and user friendly so that user find themselves at the most ease. Drop down menus are a really convenient way to fit a large menu into really small initial space. It also plays important role in the creation of an effective and user friendly website. In this article i have explore 12 resources for awesome drop down menu for your website i hope you will find them promising.
All Levels Navigational Menu is a CSS/ HTML list based menu with support for infinite levels of sub menus. It’s lightweight and easy to implement (the menu contents are simply regular HTML lists), with all of the menu links search engine friendly. Furthermore, the menu is structured in a way that makes it very easy to customize its look.
This is a tutorial showing animated drop down menu creation from strach step by step using css and jQuery.
It is Mac-like multilevel drop down menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The drop down also works on non-CSS3 compatible browsers such as IE7+, but the rounded corners and shadow will not be rendered.
It’s a framework, released under GNU General Public License. Cross browser compatible, light and easy transformable to mimic a lot of existing drop down menus out there. For example Flickr, Adobe, and MTV.com
6.Horizontal Subnav with CSS:
This is a tutorial which will go over how to create a simple navigation with a horizontal subnav. In most cases we can achieve this effect purely with CSS, but since we have to attend to our red headed step child aka IE6, we will use a few lines of jQuery to cover all grounds.
Menu system, which can be used to create a simple drop down menu for a single list of options, a fly out menu for a smaller hierarchical list of options.
8.Mega Drop Down Menu:
According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.This tutorial experiment with different ways of implementing this technique which leads to mega drop down menu system like in the figure shown.
MenuMatic is a MooTools 1.2 class that takes a semantic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without java script, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Drop downs by Patrick Griffiths and Dan Webb.
Easy, unobtrusive way to create a drop down menu with Mootools 1.2. Compatible with all of today’s popular browsers, including web kit browsers such as: Google Chrome and Safari. Also this has been tested with MooTools 1.2 users of 1.1 Upgrade your depreciated unsupported scripts.
In this tutorial they to go over how to create a sexy drop down menu that can also degrade gracefully.