Best jQuery Menus Plugins & Tutorials with Demo

FullPaged: A Single Paged Layout jQuery Plugin with UI Animations

FullPaged: A Single Paged Layout jQuery Plugin with UI Animations

Single page layouts are taking off in a big way. It seems as if every product page nowadays is single paged, so I thought I’d have a little spin at it with this jQuery plugin. This allows you to create single paged layouts with a few optional custom UI elements such as fold up menus.

I’ve tested this on most major platforms and browsers and it seems to work fine on all of them. The idea is simple, it lets you make a quick single page layout and gives you the option of some UI effects, such as disappearing pieces of image to reveal menus. I’ve also added some options to disable all that if it’s not for you. How does it work? Well let’s have a look.

Dropmenu : jQuery Multi-level dropdown menu for Buttons

Dropmenu : jQuery Multi-level dropdown menu for Buttons

Multi-level dropdown menu for buttons. Supports any HTML for items, multiple combined sync/async datasources.

Jet : jQuery CSS3 Responsive Megamenu

Jet : jQuery CSS3 Responsive Megamenu

Jet Responsive Megamenu is a menu component based in CSS and Javascript code. It can be used like a dropdown navigation, megamenu navigation or both. It’s has a responsive and fluid layout.

Features:

  • 14 Styles
  • Responsive
  • Collapsible
  • Javascript/CSS effects
  • Grid system
  • Cross browser
  • Easy to use

Animated Border Menus with CSS3 & JavaScript

Animated Border Menus with CSS3 & JavaScript

A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps.The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. So today I want to show you how to create something like that and provide some more inspirational examples.

Please note that we’ll be using transitions and animation on pseudo-elements which won’t work in some browsers (e.g. Safari and Mobile Safari).

SlickNav : jQuery Responsive Mobile Menu Plugin

SlickNav : jQuery Responsive Mobile Menu Plugin

Responsive Mobile Menu jQuery Plugin.

Features:

  • Supports with multi-level menus
  • Flexible, simple markup
  • Cross-browser compatibility
  • Keyboard Accessible
  • Degrades gracefully if javascript disabled
  • Creates ARIA compliant menu

jQuery CSS3 Modern Menu 3

jQuery CSS3 Modern Menu 3

Modern Menu 3 is a clean, modern and easy to use menu. It has a number of features that make it both useful and compelling:

  • It has a clean and attractive design.
  • It offers both a horizontal and a vertical layout.
  • It comes with 8 different themes to choose from.
  • The look is completely customizable.
  • It supports multilevel dropdowns.
  • It has smooth and attractive animations for the buttons as well as the dropdowns.
  • It uses CSS animations for better performance.
  • It has a jQuery animation fallback for browsers that do not support CSS animations.

Context.js : jQuery Contextual Menus with Twitters Bootstrap CSS

Context.js : jQuery Contextual Menus with Twitters Bootstrap CSS

Context.js is a lightweight solution for contextual menus. Currently, there are two versions.

The first is to be used with Twitters Bootstrap (bootstrap.css specifically). If you do not use or want to use bootstrap.css, there is a standalone stylesheet to give the menu it’s base styles.

Features:

  • Linted: Valid JS
  • Can be used with or without Twitters Bootstrap.css
  • Event Based Links
  • Anchor Links
  • Headers
  • Dividers
  • Recursive Menus (infinite depth)
  • Vertical Space Detection (turns into a “dropup”)
  • Horizontal Space Detection (Drops to the left instead of right)
  • Add/Delete menus Dynamically

Animate to Hide and Slide Content with jQuery

Animate to Hide and Slide Content with jQuery

In this tutorial I want to demonstrate how we can build a similar interface using jQuery animation. These codes are fairly basic and should work in any fixed-style website layout. This type of design leaves room for hidden content, along with main content cascading down the page.

Ideally we will be using jQuery animations powered by jQuery UI easing effects. I have created a live example with the navigation bar fixed onto each corner of the webpage. Check out some of my demos and see if this interface could work well in any upcoming design projects.

jQuery Wheel Menu

jQuery Wheel Menu

Wheel Menu is a small jQuery plugin that will add a fully customisable Path-like wheel menu button to your website.