Wednesday, March 11, 2009

13 Awesome javascripts css Menus

Lets take a look at recent examples of these …


1) Sexy Sliding Menu - Andrew Sellick decided to use mootools due to the smoothness of their effects, however, he developed a sliding menu using script.aculo.us .

Sexy Sliding Menu

Demo: Mootols Version
Demo: Script.aculo.usVersion


2) FastFind Menu Script - This script allows for nested menus, based on dynamic "AJAX" responses. The menu can also be dragged/dropped thanks to the jQuery Interface Library.

FastFind Menu

Demo: FastFind Menu


3) Webber 2.0 Dock Menu - Great example of a dock type navigation.

Webber 2.0 Dock Menu

Demo: Webber 2.0 Dock Menu


4) Phatfusion- Image Menu - Image menu using javascript, onClick event keeps selected item open and to close it again.

Phatfusion- Image Menu

Demo: Phatfusion- Image Menu
Demo: Mootools version with XML parser


5) Drag and Drop ordering in a TreePanel - This example shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and anything can be dropped anywhere except appending to nodes marked "leaf" (the files).

drag drop treepanel

Demo: Drag and Drop ordering in a TreePanel


6) Custom Menu Events This is a combination of animation and custom events where Think Vitamin team show us how menu items sliding into view and firing off subscribable events using Yahoo! UI.One-time effect that shows off the menu opening up and firing an event.

Custom Menu Events

Demo: Custom Menu Events | ThinkVitamin.com


7) Context Menu Functionality This is a combination of animation and custom events where Think Vitamin team show us how menu items sliding into view and firing off subscribable events using Yahoo! UI.

Context Menu Functionality

Demo: Context Menu Functionality

Another demo was suggested by one of our commentators Daniel Niquet:
Another Context Menu


8 ) LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. This effect was originally written by Guillermo Rauch using mootools javascript library.

Demo: LavaLamp jQuery Sliding Menu
Demo: Mootools Fancy Menu


9 ) Slashdot Menu- Dynamic DriveThis is a stylish collapsible menu modelled after the navigational menu found on Slashdot.

Slashdot Menu

Demo: Slashdot Menu


10 ) Mootools menu with Accordeon and EffectsThis cool menu has a neat effect by hovering over the links, and opens a 2 level submenu with an accordeon.

mootools menuMenu

Demo: Mootools menu with Accordeon and Effects


11 ) CSS Dock MenuIf you are a big Mac fan, you will love this CSS dock menu that Nick La designed. It is using Jquery Javascript library and Fisheye component from Interface and some of their icons.

CSS Dock Menu

Demo: CSS Dock Menu


12 ) jQuery Plugin: Sliding Menu- A very simple sliding menu using the effects provided by the Interface plugin.

CSS Dock Menu

Demo: jQuery Plugin: Sliding Menu


13 ) Accessible expanding and collapsing menu

CSS Dock Menu

Demo: Accessible expanding and collapsing menu


No comments:

Post a Comment