7 Sept 2013

5 BRILLIANT MULTI LEVEL NAVIGATION MENU TECHNIQUES:

1. 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.
  •                                     click here to download source code:

2. 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.

3. 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.

4. 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.

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

No comments:

Post a Comment