Best jQuery Menus Plugins & Tutorials with Demo

Rocking and Rolling Rounded Menu with jQuery

Rocking and Rolling Rounded Menu with jQuery

In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.

Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare you some space on your website. The items will be semi-transparent which means that content under them will not be completely hidden.

Blend Effect navigation menu in jQuery

Blend Effect navigation menu in jQuery

A jQuery based animation / effects, progressive enhancement plugin for CSS backgrounds.A jQuery based animation / effects, progressive enhancement plugin for CSS backgrounds. This light-weight (only 1.4KB) plugin for jQuery adds a nice blend effect to your website.

Colorful Content Accordion with CSS & jQuery

Colorful Content Accordion with CSS & jQuery

A simple, yet very eye-catching and colorful accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects. This handy script delivered by Martin Angelov is both easily modifiable end embeddable.

Halftone Navigation Menu With jQuery & CSS3

Halftone Navigation Menu With jQuery & CSS3

We are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Overlay Effect Menu with jQuery

Overlay Effect Menu with jQuery

We are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand. We will create this effect using jQuery.

Slide Down Box Menu with jQuery and CSS3

Slide Down Box Menu with jQuery and CSS3

We will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

Overlay-like Effect with jQuery

Today we will create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in order to make it look like as if we are covering the content with an overlay. This allows to focus certain elements in a web page while making others appear less prominent.

jQuery Horizontal Accordions plugin: Easy Accordion

jQuery Horizontal Accordions

Easy Accordion is a highly flexible jQuery plugin for creating horizontal accordions quickly.It generates the accordion from definition lists (dts, so it is SEO friendly) and has support for multiple instances to be ran on the same web page.The plugin can slide any content like images, lists, Flash, etc. and its look can be totally customized via CSS.

An Awesome jQuery Plugin For Creating Magical Layouts – Isotope

jQuery Plugin For Creating Magical Layouts – Isotope

Isotope is an impressive jQuery plugin that enables us to sort items and create smart layouts.Using the plugin, any given list of items can be filtered with show/hide effects and they can be re-ordered with slick animations.The plugin’s layout features are very powerful as well. With a simple function, items can be converted into horizontal/vertical layouts or arranged intelligently within a grid and much more. And, all with nice animations.



Best jQuery websites design awards