In today’s post we have a nice collection of jQuery / CSS3 Menu demos. These menus include properties like hover over, collapsible, and even sidebar menus with metro bootsraps. Enjoy!

1. Metro Hover Menu

Metro Hover Menu with a cool CSS3 raising effect.

Metro-Hover-Menu.jpg
SourceDemo

2. An Anonymous Pen

Demos using a for loop to calculate the positions of a series of way-points with an animated progress bar.

An-Anonymous-Pen.jpg
SourceDemo

3. Metro Collapsible Menu

Pretty cool metro collapse menu accordion, it uses jquery.collapsible.menu.js

Metro-Collapsible-Menu.jpg
SourceDemo

4. Metro Navigation

3 types of Metro Navigations using CSS3 transitions for colors.

Metro-Navigation.jpg
SourceDemo

5. Sidebar with sub menus + metro bootsraps

Sidebar with sub menus + metro bootsraps

Sidebar-with-sub-menus.jpg
SourceDemo

6. Topbar drop down menu

Very simple topbar drop down menu.

Edit-this-Fiddle.jpg
SourceDemo

7. Left and top sub menus

Cool demo with left and top sub menus again very easy to implement.

Edit-this-Fiddle2.jpg
SourceDemo

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • http://twitter.com/gmilby Gregory Milby

    Thanks Sam – some good finds ;-)

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.