13 Awesome Javascript CSS Menus

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 …

Pro Tip

Sign up for a free Jotform account to create powerful online forms in minutes — with no coding required.

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.

13 Awesome Javascript CSS Menus Image-1

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.

13 Awesome Javascript CSS Menus Image-2

Demo: FastFind Menu

3) Webber 2.0 Dock Menu

Great example of a dock type navigation.

13 Awesome Javascript CSS Menus Image-3

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.

13 Awesome Javascript CSS Menus Image-4

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

13 Awesome Javascript CSS Menus Image-5

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.

13 Awesome Javascript CSS Menus Image-6

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.

13 Awesome Javascript CSS Menus Image-7

Demo: LavaLamp jQuery Sliding Menu
Demo: Mootools Fancy Menu

9) Slashdot Menu- Dynamic Drive

This is a stylish collapsible menu modelled after the navigational menu found on Slashdot.

13 Awesome Javascript CSS Menus Image-8

Demo: Slashdot Menu

10) Mootools menu with Accordeon and Effects

This 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 Menu

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

13 Awesome Javascript CSS Menus Image-9

Demo: CSS Dock Menu

12) jQuery Plugin: Sliding Menu

A very simple sliding menu using the effects provided by the Interface plugin.

13 Awesome Javascript CSS Menus Image-10

Demo: jQuery Plugin: Sliding Menu

13) Accessible expanding and collapsing menu

13 Awesome Javascript CSS Menus Image-11

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

Photo by Suhash Villuri on Unsplash

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: