Skip to main content

7 jQuery / CSS3 Menu Demos

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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 has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.