7 jQuery / CSS3 Menu Demos

Sam Deering

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

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

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

    Thanks Sam – some good finds ;-)