10 Brilliant Multi Level Navigation Menu Techniques
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.
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.
dnamic (135)
chosen (113)
Martin Ivanov (85)
ravindra (61)
tutorialfeed (54)
Noura Yehia (41)
Spider8411 (41)
dicky83 (39)
psdeluxe (32)
woork (31)
ddrive (27)
Oxp (24)
kailoon (23)
tech (23)
Mert TOL (22)
satbir (21)
vladocar (18)
impresslab (17)
spicywebdesign (17)
prlamnguyen (17)
Shazza (16)
jesus, thank you
GReat!!
superb!!!!1
Thats a great collection buddy. Thanks you.
Very nice collection. Menu’s are a always a challenge for me. Thanks for putting so many options together.
Great List. Thanks for this!
Id like to add one as well: Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
Really interesting menus. I especially liked the vimeo style dropdown menu which is quite simple to understand as it contain plain html elements.
STUMBLED!
Fantastic list, thanks for sharing.
Wow dude, that is like way cool!
These are all great. My only problem is integrating something into a site that is full of jquery.
Nice job. The best tutorial I’ve seen.
what a great collection. thank you!
For websites I believe more than one sublevel of nav is pushing it.
Didn’t much of this originate from CSS Play ? Sometimes I that guy invented all the cool (and effective) techniques..
Nice post. Everyone should be designing to these standards now. Thanks for sharing.
Good list. Thanks
thanks for time.
That jQuery file tree is my favorite. Thanks a lot for the links!
i have a simple one…as i believe in simplicity
Neat collection, thanks for sharing!
I’m concerned that most of these put forth the same idea. I don’t think Multi-Level Navigation is all that usable. The circular one is pretty confusing even to me.
I enjoyed the vimeo one, thanks
Nice list! Thanks for including my article
Am I the only one that hates drop-down menus on websites…no matter how well they look or work?
It’s spelled collapsible. (Not being rude, thought you’d like to fix.)
Thanks a lot.
Hereby bookmarked
Good stuff, some really creative navigation menus here.
Awesome. Thanks lot.
Great!
nice collection! thanks
wickedddddddd!
Great I can certainly use these!!
awesome menu style. thanks.
great techniq , thanks.
Great collection of various menu navation. I look forward to trying some of these out. Very nice touch to a website.
Thanks!
Good collection, I liked the javascript one the most
Nice!!!
awesome collection. I’ll be checking out a few of them that use jquery
Thanks for the mention!
Awesome article, bookmarked as hell!
very good, thanks
I wish people would give up on drop-down menus. They really are not very user-friendly… Mind you, the vimeo one does look good.