Almost the same top navigation implemented on Vimeo.com is created by Janko. Best thing about it, is the menu that drops down when you hover search box. It offers you different search options that you can choose and narrow your search.
The base for this tutorial is simple CSS drop down menu based on unordered list. The structure is visually described in the image below:
As you can see the UL has four items. The first one is logo with short submenu. Then comes login link, Help link with submenu and search item with submenu. Each submenu is being shown when hover corresponding link.
This menu does not only separate HTML from CSS, but even CSS definitions are categorized into structural and thematic types. Thus creating a new css drop-down menu means creating only a new theme since structure is permanent. Can be transformed by changing class name only. Available transformations: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.
- The code and files are well organized. Available channels to hook up to your CMS or other tools as well as existing websites in XHTML format.
- Can be transformed by changing class name only. Available transformations: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.
- Configurations available for Windows Internet Explorer 5 or later, Mozilla Firefox 1.5 or later, Opera 7 or later, Apple Safari 2 or later, Google Chrome 1, etc.
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. This script has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome.
- – Search Engine Friendly
- – Accessible: Tab through main menu links with tab key. Navigate through drop down menus with arrow keys
This nice menu adds a sub menu level of smaller icons in a circular pattern within the top level circle. There is also the facility to add a simple description of each icon. Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.
The Fancy Sliding Tab Menu runs on Mootools with an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.
Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that’s a good thing given the important role of this element in any site.
The menu’s contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek “slide plus fade in” transition is applied during the unveiling of the sub menus.
This menu was part of a tutorial written by Antonio Lupetti illustrating the art of reusing code in your web projects. In this example he implemented a collapsable box with an animated effect on mouse over (try to move your mouse over “About Me” and “Click here”).
This is a replica of the Digg header. Important things like subscribing, searching and account information are right up top where you would expect them to be. Fluid width (but only to a point!), drop down menus, attractive search, easy to change colors.
10. jQuery File Tree
What i like about this menu, is its ability to style icons based on file extension and using AJAX to fetch file information on the fly. More over you can customize expand/collapse event and speeds.