Every web designer tries to be creative when it comes to designingthe main navigation of the website. Now we present you with 13 awesomeJavascript CSS menus that will be very handy and easy to modify to suityour needs.
3 l7 H5 y. j) u# _Lets take a look at recent examples of these …
- a$ s; }1 h+ X! u/ Z1)
Sexy Sliding Menu- Andrew Sellick decided to use mootools due to the smoothness of theireffects, however, he developed a sliding menu using script.aculo.us .注解(上拉菜单 可以内置说明)
& r1 s0 v/ w$ {' S. M/ O2 k
Demo:
Mootols Version
/ I3 x; Q1 i$ ^& E$ aDemo:
Script.aculo.usVersion+ O4 p: o: F5 t4 w L4 i
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.
4 U* [2 H$ |# W6 d# @' T; E7 @
Demo:
FastFind Menu
1 b7 i, r7 J0 Q; X2 H3)
Webber 2.0 Dock Menu - Great example of a dock type navigation.<内示 MAC 的DOCK 菜单栏 可自动隐藏>
8 }% G# D3 v( M3 A' h5 q9 w" C; z
4 _& \5 k+ b. |
Demo:
Webber 2.0 Dock Menu7 W: Z' ~6 W# k' d4 L0 A L! h5 |: x
4)
Phatfusion- Image Menu - Image menu using javascript, onClick event keeps selected item open and to close it again.<菜单内置图片 伸缩性>
/ |& w `& |! g1 Z5 y2 Q
Demo:
Phatfusion- Image Menu 6 m3 p4 k9 I. q* r" R5 s
Demo:
Mootools version with XML parser$ `0 ~8 s1 ?7 ~6 C4 }5 k
5)
Drag and Drop ordering in a TreePanel- This example shows basic drag and drop node moving in a tree. In thisimplementation there are no restrictions and anything can be droppedanywhere except appending to nodes marked "leaf" (the files).<树形目录菜单>
& u& U' E- W% m' v
Demo:
Drag and Drop ordering in a TreePanel0 l' r9 q0 ~- }/ t) W
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.<自定义菜单事件>
6 V7 {' D; F0 `8 H: l2 _* T: n
Demo:
Custom Menu Events | ThinkVitamin.com7 W$ Q# W2 m) g' }( g) a
7)
Context Menu FunctionalityThis 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.
6 m! H# u. x( d
Demo:
Context Menu Functionality<2 L" a: h! ~# M
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.<JQuery 调用Style 应用与菜单>
& ^) h( G: @! ~ ^, x
x) e( q$ W# h k( c/ Z, J% {+ W
Demo:
LavaLamp jQuery Sliding Menu
# V* f9 E1 U! O' }& KDemo:
Mootools Fancy Menu3 E8 W* ?" f$ I: I
9 )
Slashdot Menu- Dynamic DriveThis is a stylish collapsible menu modelled after the navigational menu found on Slashdot.<伸缩菜单>
( z/ O: i+ b5 r3 q& b
Demo:
Slashdot Menu
, @, F+ d' N4 M8 _! B1 J% m10 )
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.
7 l* t2 G( D9 p ?3 H( k- X <mootools 的菜单应用 特效>
7 \2 G7 r' S9 w- L* b
2 P# q) u# E7 C0 C/ A3 l
Demo:
Mootools menu with Accordeon and Effects
5 j2 I7 B# ?: G11 )
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.
9 w% b' U: U# w6 K9 b; u. Q
Demo:
CSS Dock Menu; B& ?# E$ G$ X% g h0 I5 t
12 )
jQuery Plugin: Sliding Menu- A very simple sliding menu using the effects provided by the Interface plugin.
6 p9 }$ X! b+ [% }" S; B
" f( Q* x$ S2 L$ F4 [
Demo:
jQuery Plugin: Sliding Menu4 x# d5 F, P8 ?/ z$ o/ P7 ~
13 )
Accessible expanding and collapsing menu. d/ K7 W4 q$ W1 v3 o9 D
Demo:
Accessible expanding and collapsing menu
, ?8 u1 L# b1 S6 H2 ?
% X% v" e* N2 A4 aWeb-developers can create amazing menus with Javascript and CSS.AJAX makes it possible to create more interactive, more responsive andmore flexible navigation to any website. If you guys have an awesomeAjax/CSS menu that you think its should be added to the list, don’thesitate to let me know and a link to your site will be added besideany amazing menu you find intersting.
