13 Awesome Javascript CSS Menus

October 31st, 2007

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

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 |

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

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.

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: , ,

52 comments for „13 Awesome Javascript CSS Menus
  1. Tom on November 7th, 2007 at 6:15 am

    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!

  2. Sergio on November 7th, 2007 at 9:02 am

    Yes! there are very amazing!!! cheers!!

  3. Daniel Niquet on November 7th, 2007 at 9:15 am

    Alternative for Menu 7) Context Menu Functionality for Mootools

  4. Ronald Schexnayder on November 7th, 2007 at 1:21 pm

    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

  5. Casidiablo on November 7th, 2007 at 2:44 pm

    Uff, Excelentes… de verdad es impresionante lo bonito que es el CSS + JavaScript

  6. 5h4rk on November 7th, 2007 at 6:30 pm

    Wow, the Phatfusion’s Image Menu is awesome! I would also like to know how to purchase a copy of that piece of beautifulness.

  7. Noupe on November 9th, 2007 at 4:08 pm

    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.

  8. Noupe on November 9th, 2007 at 4:12 pm

    cssProdigy, 5h4rk, Ron
    The phatfusion has created an image menu with the aid of Mootools framework.

    • It allows onClick event keeps selected item open.
    • Click open item to close.
    • Specify a function for the onClick event.
    • Auto open when the page loads

    You can contact the author of this menu through his website ask him to use it and give him credit in the source file.
    That will do it.

  9. tataryigit on November 10th, 2007 at 12:43 pm

    Thanks for all! Nice menus

  10. hellboy726 on November 11th, 2007 at 2:39 am



  11. Luxbot on November 11th, 2007 at 7:51 am

    Love the list! Keep up the good work!


  12. Jason on November 11th, 2007 at 12:47 pm

    AWESOME!!! some great stuff

  13. Daniel on November 13th, 2007 at 4:01 am

    I couldn’t understand some parts of this article nnial 2007 – salvatore iaconesi – poetry, but I guess I just need to check some more resources regarding this, because it sounds interesting.

  14. George on November 13th, 2007 at 9:31 am

    Nice article, thanks.

    The Phatfusion menu’s javascript file ( specifies that it is published under MIT license. I think contacting the author is an excellent courtesy, but probably not necessary.

  15. Matt Ellsworth on November 13th, 2007 at 12:29 pm

    great list – i have been looking to redo some navigation – so this will make it work a lot easier. thanks.

  16. George on November 14th, 2007 at 6:10 am

    thanks a lot :)

  17. MisterGibson on November 14th, 2007 at 6:36 pm

    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.

  18. Alarm on November 18th, 2007 at 2:38 am

    thanks bro realy good works

  19. Kutsalodun on November 18th, 2007 at 2:38 am

    thanks bro realy good works

  20. Joy on November 19th, 2007 at 11:33 am

    Great post!I really appreciate it!

  21. Richard Morton on November 20th, 2007 at 5:56 am

    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)

  22. lth on November 20th, 2007 at 6:59 am

    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!

  23. Ictinus on November 21st, 2007 at 2:31 pm

    A variation on the Slashdot menu but with submenus is available at

  24. Noupe on November 22nd, 2007 at 7:18 am

    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.

  25. Noupe on November 22nd, 2007 at 7:20 am

    Richard Morton : There is a vertical version i found here that is based on phatfusion, you can contact the author and see if its ok to use it.

  26. Ankit Bhatia on November 23rd, 2007 at 10:21 am

    cool menus…
    same as i wanted…

  27. Hediye on February 17th, 2008 at 10:21 am

    useful menus

  28. Christian on March 11th, 2008 at 9:43 am

    Thanks for this article!

  29. betsson24 on March 16th, 2008 at 12:15 pm

    thanks a lot.good works. ..

  30. CSSBanter on March 26th, 2008 at 11:33 am

    nice share. Thanx!

  31. Organizasyon on March 29th, 2008 at 3:08 pm

    your email is never !

  32. Oliver Smith on April 2nd, 2008 at 6:07 am

    Good List, Tom i think the menu you are refering to has been used on SEOMoz.

  33. Meekrab on April 16th, 2008 at 10:31 am

    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)

    Can anyone help me solve this problem? Email me if you can help, thanks!

  34. Meekrab on April 16th, 2008 at 10:36 am

    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?

  35. Acronyms on April 17th, 2008 at 5:13 am

    Always loved pure css menus.

  36. Sugarnines on April 17th, 2008 at 10:40 pm

    Very Full Menus!

  37. betsson on April 21st, 2008 at 4:31 am

    Good stuff. Thanks and greetings!

  38. Rüya Tabirleri on April 24th, 2008 at 6:16 pm

    Thanks for this great article

  39. yasamphani on May 2nd, 2008 at 12:55 am

    Can i use these for my site?

  40. Ivan Jimenez on May 13th, 2008 at 6:45 pm

    Lovely! – love the amount of good resources this website have. I don’t know how I hadn’t seen it before! Thanks very much!

  41. problem cocuk on May 22nd, 2008 at 12:19 pm

    I have written a topic on my blog. You can see here,

  42. php-web-developer on May 24th, 2008 at 12:29 am

    we will keep looking for the most inspiring examples will continue posting it more often.

  43. Online Folder on May 27th, 2008 at 3:45 am

    Wow great, thanks!

  44. Ganesh Kumar on June 25th, 2008 at 5:16 am


  45. iyinet on July 1st, 2008 at 3:25 am

    Thanks for the menus; there are so useful!

  46. Rome on July 8th, 2008 at 7:58 pm

    Thx amigo for the great article.
    very nice menus. maybe i’ll use one.
    bookmark potential ;-)

    best regards

  47. max on July 21st, 2008 at 1:24 am

    Cooooooooool man but could u plz updates stuff it been 1 year we are seeing the same stuff

  48. PhilFreelance-Web on July 28th, 2008 at 9:39 am

    Thank for this wonder full colleciton css menu

  49. Santhos on July 31st, 2008 at 2:03 pm

    Nice post! I think the menu’s all look very nice. The treepanel is impressive, might be worth spending some extra time on! Thx!

  50. Tony on August 4th, 2008 at 2:19 am

    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

  51. Mark Abucayon on August 10th, 2008 at 3:36 am

    wow all are nice css menu using javascript. thank you for sharing this one.

  52. Volkan on August 11th, 2008 at 6:37 pm

    Thanks. Very good css Menus.