Every web designer tries to be creative when it comes to designing the main navigation of the website. Now we present you with 13 awesome Javascript CSS menus that will be very handy and easy to modify to suit your needs.
You might be interested to take a look at the menus found in the link below:
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 .
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.
Demo: FastFind Menu
3) Webber 2.0 Dock Menu - Great example of a dock type navigation.
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.
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).
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.
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.
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.
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.
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.
Demo: CSS Dock Menu
12 ) jQuery Plugin: Sliding Menu- A very simple sliding menu using the effects provided by the Interface plugin.
Demo: jQuery Plugin: Sliding Menu
13 ) Accessible expanding and collapsing menu
Demo: Accessible expanding and collapsing menu
Web-developers can create amazing menus with Javascript and CSS. AJAX makes it possible to create more interactive, more responsive and more flexible navigation to any website. If you guys have an awesome Ajax/CSS menu that you think its should be added to the list, don’t hesitate to let me know and a link to your site will be added beside any amazing menu you find intersting.
- If you like this article, Add to
- del.icio.us
- digg
- Digg
Dizi izle
December 31st, 2001
thanks good
pollaki
November 7th, 2007
guau! los tenia a la mayoria en mis marcadores pero marcando este sitio los tengo a todos en uno..
muy buena selección!
Tom
November 7th, 2007
Nice article, thanks.
Can anyone remember the name of the menu system which I saw recently, possibly on a financial services site?
The menu ran across the page as a single horizontal line of text. So far, so normal. But when you mouse-overed the menu, the part of the page underneath the menu moved down about 100px, and all of the submenu options for each of the main menu items were visible. Almost as if all the dropdowns launched at once.
I remember it worked really well, but forgot to bookmark it. Doh!
cssProdigy
November 7th, 2007
cool, there are more menus with mootools though.
Sergio
November 7th, 2007
Yes! there are very amazing!!! cheers!!
Daniel Niquet
November 7th, 2007
Alternative for Menu 7) Context Menu Functionality for Mootools
http://utils.softr.net/contextmenoo-menu-contextual-con-mootools/
Ronald Schexnayder
November 7th, 2007
How may I purchase the phatfusion menu image code, that is awesome, I wish to use it in a web site I am creating, thanks, ron
Casidiablo
November 7th, 2007
Uff, Excelentes… de verdad es impresionante lo bonito que es el CSS + JavaScript
5h4rk
November 7th, 2007
Wow, the Phatfusion’s Image Menu is awesome! I would also like to know how to purchase a copy of that piece of beautifulness.
Noupe
November 8th, 2007
Hello Everyone,
I am glad you liked my article, i am trying to put a complete resource for web designers to help us craft clean and usable websites.
If you have or find any tip or idea feel free to submit it at the submit form on the right of this page or through the submit link at the top menu.
If your submission is approved and posted on noupe, rest assured you will be given credit where credit is due by posting either your sites link and/or name with in the article. Well, that’s it, just fill out the form and hit submit!
Noupe
Noupe
November 9th, 2007
Tom, the menu you are talking about is so cool, it makes the content of the page slides down and shows the submenu items once you hover over the main menu.
I don’t remember its name but if anyone can help that would be great and we could also add it to our list.
Noupe
November 9th, 2007
cssProdigy, 5h4rk, Ron
The phatfusion has created an image menu with the aid of Mootools framework.
You can contact the author of this menu through his website http://www.phatfusion.net/and ask him to use it and give him credit in the source file.
That will do it.
tataryigit
November 10th, 2007
Thanks for all! Nice menus
hellboy726
November 11th, 2007
Nice…
ty..
Luxbot
November 11th, 2007
Love the list! Keep up the good work!
-LB
www.r10.net küresel ?s?nmaya hay?r seo yar??mas?
November 11th, 2007
These are so fine ,thanks
Jason
November 11th, 2007
AWESOME!!! some great stuff
Dragan
November 11th, 2007
http://dragan.yourtree.org/blog/en/2007/05/11/css-menu-with-slider/
Daniel
November 13th, 2007
I couldn’t understand some parts of this article nnial 2007 - salvatore iaconesi - del.icio.us poetry, but I guess I just need to check some more resources regarding this, because it sounds interesting.
George
November 13th, 2007
Nice article, thanks.
The Phatfusion menu’s javascript file (http://www.phatfusion.net/imagemenu/imageMenu.js) specifies that it is published under MIT license. I think contacting the author is an excellent courtesy, but probably not necessary.
Matt Ellsworth
November 13th, 2007
great list - i have been looking to redo some navigation - so this will make it work a lot easier. thanks.
George
November 14th, 2007
thanks a lot
MisterGibson
November 14th, 2007
I am interested in the sliding image menu PhatFusion made, but I find no contact info or even copyright info in the various support files or around that site.
Did I miss something?
That construct is in line with what I’ve been designing towards on a project. I’m preparing some image libraries for open-source public domain release and have an image browser I was intending to do in Flex, but now want to cover as many UI bases as possible and see this primary menu work in Ajax-land as well as ActionScript-world - so I can deliver both.
This is a labor of love, so I have no budget, but I’d be glad to point credit to anyone kind enough to steer me through how this little bit of magic was done, because I can’t quite see which wand makes what bunny appear.
-Thx
Alarm
November 18th, 2007
thanks bro realy good works
Kutsalodun
November 18th, 2007
thanks bro realy good works
Joy
November 19th, 2007
Great post!I really appreciate it!
Richard Morton
November 20th, 2007
Very interesting and inspiring ideas.
Particularly good is the Phatfusion one. Does anyone know if there is a version of this (or can it be adapted) in vertical format i.e. so the text can be easily read?
The slashdot menu looks good at first glance but suffers from flickering (at least when viewed through IE 6.0)
lth
November 20th, 2007
I like there! I wander if i can use one of them in my own website. If i can, i would be glad to be informed by email. Thanks very much!
Ictinus
November 21st, 2007
A variation on the Slashdot menu but with submenus is available at http://www.ictinus.com/
Noupe
November 22nd, 2007
Hi Everyone,
I am glad that you liked this post, we will keep looking for the most inspiring examples will continue posting it more often.
If anyone finds something intersting, feel free to post it through our submit form .
Many of you have asked about using the Phatfusion menu, it released under MIT-style license. So i guess this answers all your question about using it.
Noupe
November 22nd, 2007
Richard Morton : There is a vertical version i found here http://www.h4×3d.com/creation/ that is based on phatfusion, you can contact the author and see if its ok to use it.
Ankit Bhatia
November 23rd, 2007
cool menus…
same as i wanted…
!!tnx!!
visit
November 23rd, 2007
a really great homepage! i’m a big fan of your stuff although i’m just 16!
olcay bal
December 17th, 2007
bence harkulade menuler
Youngstil
January 17th, 2008
It’s great thanks.
fadern
January 17th, 2008
Thanks
wizard
January 25th, 2008
yees thanx
Hediye
February 17th, 2008
useful menus
thanks
"iyinet webmaster forumu 2008 seo yar??mas?"
February 26th, 2008
THANKS.
Christian
March 11th, 2008
Thanks for this article!
betsson24
March 16th, 2008
hi;
thanks a lot.good works. ..
html kodlar?
March 20th, 2008
thanks
Estetik
March 24th, 2008
Required fields are marked !
iyinet webmaster forumu 2008 seo yar??mas?
March 24th, 2008
Thank you good job
CSSBanter
March 26th, 2008
nice share. Thanx!
alptekin
March 27th, 2008
thanks
video
March 29th, 2008
te?ekkürler
Organizasyon
March 29th, 2008
your email is never !
Oliver Smith
April 2nd, 2008
Good List, Tom i think the menu you are refering to has been used on SEOMoz.
msn ifadeleri , msn nickleri
April 3rd, 2008
thanks .
firefox indir
April 3rd, 2008
thank you !
güvenlik sistemleri
April 5th, 2008
thats greate..
Webmaster Blog
April 9th, 2008
. Required fields are marked
sogutma
April 9th, 2008
thanks
soguk hava deposu
April 9th, 2008
thanks…
firefox indir
April 9th, 2008
thank you
mozilla firefox son sürüm
April 9th, 2008
thanks
Rize Rehberi
April 13th, 2008
thank youu site
Meekrab
April 16th, 2008
I’ve been trying to get the phatfusion image menu to work on my site, but I keep getting errors.
“Class is not defined”:
(under the imageMenu.js file)
var ImageMenu = new Class({
and “ImageMenu is not a constructor”
(in the javascript embedded in my page)
onOpen:function(e,i){console.log(e)}
Can anyone help me solve this problem? Email me if you can help, thanks!
Meekrab
April 16th, 2008
I just fixed the problem, but I am still getting one last error:
this.elements[0] has no properties (in the imageMenu.js file)
Can anyone help?
Acronyms
April 17th, 2008
Always loved pure css menus.
Sugarnines
April 17th, 2008
Very Full Menus!
betsson
April 21st, 2008
Good stuff. Thanks and greetings!
Rüya Tabirleri
April 24th, 2008
Thanks for this great article
so?utma, ?s?tma
April 30th, 2008
So?utma,?s?tma
so?utma, ?s?tma
April 30th, 2008
So?utma,?s?tma
Kepçe
April 30th, 2008
Required fields are marked thank you..
yasamphani
May 2nd, 2008
Can i use these for my site?
youtube
May 3rd, 2008
Thanks for post, and nice all comments !
mr.karam
May 4th, 2008
Awesome >> thz
Ivan Jimenez
May 13th, 2008
Lovely! - love the amount of good resources this website have. I don’t know how I hadn’t seen it before! Thanks very much!
Plastik Çember
May 14th, 2008
Thank you !
KaaN
May 15th, 2008
Thank You Very much.
Oto Kiralama
May 18th, 2008
Your email is never published nor shared. Required fields are marked *
Tatil
May 19th, 2008
Your email is never published nor shared. R
oh.god
May 19th, 2008
????Thank you !
oh.god
May 19th, 2008
????Thank you !
problem cocuk
May 22nd, 2008
Hi,
I have written a topic on my blog. You can see here,
http://www.problemcocuk.com/10-adet-javascript-ajax-tab/
php-web-developer
May 24th, 2008
we will keep looking for the most inspiring examples will continue posting it more often.
Online Folder
May 27th, 2008
Wow great, thanks!
Sorensoc
May 27th, 2008
I’m new to this javascipt but I was hoping that someone could show me how to create a menu that is similar to the ones that appear on http://www.lowes.com
Travesti
May 27th, 2008
thank you amatorler
?zle Dizi
May 31st, 2008
Thank You
tia reklam
June 6th, 2008
dijital bask? uzman?
Elektronik sigara
June 6th, 2008
Elektronik sigara !
rakicioglu
June 7th, 2008
http://www.rakiciogluotomotiv.com
Sefa ?ahin
June 9th, 2008
thanks goods
efekan
June 12th, 2008
http://www.biltekbilisim.com web sitesi yap?l?r googleye ç?kar?l?r
adtech
June 13th, 2008
Nice list. I’ve bookmarked it.
efekan2563
June 15th, 2008
http://www.biltektasarim.com
iyinet webmaster forumu 2008 seo yar??mas?
June 17th, 2008
thanks css menus
Bi dünya
June 17th, 2008
thank you?!
plastik çember
June 17th, 2008
thank you paltas..
adtech ile reklam
June 19th, 2008
Thank you!
http://www.adtechilereklam.net/
an?lcan
June 19th, 2008
thanks good
kömür
June 19th, 2008
very good
anilcan
June 22nd, 2008
thanks
Ganesh Kumar
June 25th, 2008
Thanks
tala
June 27th, 2008
thnkk !
iyinet webmaster forumu 2008 seo yar??mas?
July 1st, 2008
Thanks for the menus; there are so useful!
hekimboard
July 1st, 2008
hekimboard is very nice…
Oyun indir
July 8th, 2008
Thanks for the menus; there are so useful!
Rome
July 8th, 2008
Thx amigo for the great article.
very nice menus. maybe i’ll use one.
awesome!
bookmark potential
best regards
rome
michael
July 17th, 2008
I have not seen some of these sliders before, coffee cup uses to make a great button menu factory but I don’t know if they still have it.
kabin
July 18th, 2008
very web designer tries to be creative when it comes to designing the main navigation of the website. Now we present you with 13 awesome Javascript CSS menus tha
max
July 21st, 2008
Cooooooooool man but could u plz updates stuff it been 1 year we are seeing the same stuff
Suresh
July 21st, 2008
Very nice article. Menus are very useful.
Thank you very much.
Suresh
- http://www.realgroup.co.in
prefabrik
July 23rd, 2008
nice documents its amazing.
hal? y?kama
July 23rd, 2008
thank you
izmir evden eve
July 25th, 2008
thnk you..
izmir evden eve
July 25th, 2008
thank you…
PhilFreelance-Web
July 28th, 2008
Thank for this wonder full colleciton css menu
izmir evden eve
July 29th, 2008
thank you..
Santhos
July 31st, 2008
Nice post! I think the menu’s all look very nice. The treepanel is impressive, might be worth spending some extra time on! Thx!
hal? y?kama
August 3rd, 2008
thanks
Tony
August 4th, 2008
CSS and JS can easily be stolen. Somebody sees your site, they like it, they’ll help themselves.
Is there anyway to protect those? maybe by putting password protection or something?
very good post
www.kartalplast.com
August 7th, 2008
thanks water tanks, prefabricated buildings, office containers, modular cabins, boat