Web-developers can create user-friendly horizontal or vertical navigation menus using CSS. Javascript makes it possible to create more interactive, more responsive and more flexible navigation to any website.

Today we wanted to highlight 10 brilliant Multi Level Navigation Menu Techniques built using different Javascript Libraries including jQuery, Mootools along with some CSS magic to give us what you see below.

1. Create Vimeo-like top navigation

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.

Demo | Download source code

2. CSS Drop-Down Menu Framework

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.

Features Include:

• 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.
• Minimal JavaScript code only for IE 6 or earlier. Can be used with popular JavaScript libraries Jquery or Scriptaculous. Everything else is pure CSS.

Horizontal Menu Demo | Vertical Menu Demo | Download source code

3. 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. This script has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome.

Click here for the demo | Download source code

4. MenuMatic

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.

Features Include:

• - Search Engine Friendly
• - Accessible: Tab through main menu links with tab key. Navigate through drop down menus with arrow keys
• - Fails Gracefully: Falls back to suckerfish CSS based drop down menu system in the absence of javascript.

Horizontal Menu Demo | Vertical Menu Demo | Download source code

5. A circular menu with sub menus

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.

6. Fancy Sliding Menu for Mootools

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.

View Demo | Download source code

7. Smooth Navigational Menu

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.

8. Collapsable menu

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”).

View Demo | Download source code

9. Designing the Digg Header

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.

View Demo | Download source code

10. jQuery File Tree

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso.

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.

View Demo | Download source code