Top 10 jQuery and CSS3 Navigation Menus Examples

Read Time:2 Minute, 58 Second

Navigation menu plays very big roll to design good website.
With the help of latest jQuery and css3 features and customization we can create excellent navigation menu for our website.
Here is list of 10 jQuery and CSS3 navigation menu which is already available for use.

1.jMenu : Demo | Download

Menu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.
Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown).
The markup of the menu is pretty clean as it makes use of nested lists.
The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible.

2.Ascensor.js : Demo | Download

“Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system”

3. jQuery Dropdown Login Form : Demo | Download

A Simple and Effective jQuery Dropdown Login Form

4. Horizontal Nav : Demo | Download

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you’ve ever had to create this effect on a project, you’ll know it’s pretty annoying to do. But this plugin makes it easy and adds support for IE7.

5. jQuery Navigation Plugin : Download

jQuery Navigation PluginTwo possible nav effects so far: ‘fade’ and ‘slide’.I may add support for jQuery UI easing effects. It would be pretty easy, but not sure how good it would lookTo do:1. Make a vertical menu as well as the horizontal menu I have already.2. Make the right side subitems fall to the left of the dropdown. Have the menu intelligently decide what side the submenu should fall on.3. Make a fixed width or ‘auto’ width option for the top level items. This has proved difficult to support on IE.Settings:itemWidth – Integer – width of each individual nav itemitemHeight – Integer – height of each individual nav itemnavEffect – String – “slide”,”fade”; two options at the moment. slide or fade. Default has no effectspeed – Integer – the speed of the tranition effectvertical – Boolean – default is a horizontal menu with vertical dropdowns. true – the top row is vertical

6. Automatic Ajax jQuery Navigation : Download

The goal of refresh plugin is to simply refresh through an automatic ajax call any element of the page.

7. Kwicks for jQuery : Download

Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget.

8. Casper JS : Download

CasperJS is an open source navigation scripting & testing utility written in Javascript and based on PhantomJS — the scriptable headless WebKit engine. It eases the process of defining a full navigation scenario and provides useful high-level functions, methods & syntactic sugar for doing common tasks such as:

defining & ordering browsing navigation steps

filling & submitting forms

clicking & following links

capturing screenshots of a page (or part of it)

testing remote DOM

logging events

downloading resources, including binary ones

writing functional test suites, saving results as JUnit XML

scraping Web contents

9. Bootstrap Image gallery : Demo | Download

Bootstrap Image Gallery is an extension to the Modal dialog of Twitter’s Bootstrap toolkit, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.

10. HTML5/CSS3 Gray Navigation Menu : Demo | Download

Today’s freebie is another navigation menu, but, this time, one built using only HTML5 and CSS3.

No images were used, just CSS. It is cross-browser compatible and was optimized for IE7 and above.

Enjoy!

About Post Author

Vishal Barot

Hi there, Vishal Barot here. Full-time web developer and graphic designer with over 10 years of experience. I've been experimenting with web development since I was 17 years old. If you are looking to have a professional website or design then I can develop it for you. Looking forward to working with you.

barot.vishal@gmail.com