Best jQuery Menus Plugins & Tutorials with Demo

jQuery Circle Menu

jQuery Circle Menu

A customizable jQuery plugin that emulates the menu in the Path application. Includes a selection animation and various animation options for opening and closing the menu.

Simple YouTube Menu Effect with CSS3 & JavaScript

Simple YouTube Menu Effect with CSS3 & JavaScript

Today we’ll show you how to recreate the little menu effect that you can see in the left side-menu on YouTube when watching a video (where it says “Guide”). The menu is made of a little menu icon, a label and a list of menu items that appears when the label or menu icon is clicked. Once it’s clicked the menu icon slides to the right and the label moves up while the list items fade in sequentially. We’ll add some more style and effects to it in order to make it a bit more interesting.

DoubleTapToGo.js : jQuery Touch-friendly drop-down navigation

DoubleTapToGo.js : jQuery Touch-friendly drop-down navigation

doubleTapToGo is responsive and touch-friendly dropdown navigation.

The technique consists of three main parts:

  1. Simple drop-down navigation based on HTML and CSS;
  2. Responsiveness implementation using media queries;
  3. Adoption for touch screen devices with the help of a super tiny jQuery plugin.

Cream Tabs : jQuery Plugin

Cream Tabs : jQuery Plugin

Cream Tabs it is a mix of tabs and navigation menu with content slider.

Features:

  • Retina ready (Font Awesome integrated)
  • Simple to use
  • Live preview
  • Cross Browsers
  • Content Slider
  • Fully customizable
  • Min version: 6 kb
  • Allow multiple connections
  • Menu position: vertical/horizontal
  • Position on screen: coordinates or auto
  • Simple change color

Snap.js : A Library for creating beautiful mobile shelfs in Javascript

Snap.js : A Library for creating beautiful mobile shelfs in Javascript

A Library for creating beautiful mobile shelfs in Javascript (Facebook and Path style side menus)

Features:

  • Firefox 10+, Wide Webkit Support (Android WebKit 2.3.X+)
  • Library Independent
  • High Customization
  • Flick Support
  • User Intent Detection
  • Event Hooks
  • CSS3 Powered Animations
  • Drag Support
  • Programatic API
  • “No-Drag” Elements
  • Definable Easing Mode
  • Enable/Disable Events
  • Disabled Sides (left or right)

jQuery Responsive Multi-Level Menu with CSS3

jQuery Responsive Multi-Level Menu with CSS3

Today we want to share an experimental drop-down menu with you. The main idea is to save space for menus that have a lot of content and sub-levels. Each sub-level in this menu will be shown in its own context, making the “parent” level disappear. This is done with subtle animations that are defined in separate animation classes. The menu is fluid so that it can be used easily in a responsive layout.

Slide and Push Menus in CSS & JavaScript

Slide and Push Menus in CSS & JavaScript

A set of fixed menus that will slide out from any of the edges of the page. The two menus that slide out from the left and right side can also be used in combination with the body moving to the left or right side, respectively, hence being “pushed”.

There are examples of how to trigger the opening and closing of the menus and some example media queries.

Flaunt.js : jQuery stylish responsive navigations

Flaunt.js : jQuery stylish responsive navigations

Flaunt.js is a jQuery script that allows you to create a responsive, nested navigation out the box. Flaunt was built to overcome responsive design challenges which faced a huge percentage of websites. This challenge was to show nested navigation items on click-demand, without the event taking you through to the page you’ve pressed…

Metro Menu : jQuery Stylish Menu

Metro Menu : jQuery Stylish Menu

Metro Menu will help you to create a powerful stylish menu.This plugin is responsive and customizable. You can change the color, animation, position, closing methods and more.

Features:

  • Infinite Menu Options
  • Infinite SubMenu Options
  • Infinite color
  • more than 100 different images
  • You can control the way that the Metro Menu will disappear
  • Support 1 main menu and every option can store a submenu with infinite sub menu icons

Metro Style Side Menu with jQuery

Metro Style Side Menu with jQuery

Metro Style Side Menu with jQuery.

Features:

  • Crossbrowser
  • Simple/Clean
  • Metro Style
  • 900+ SVG Icons
  • Hight Resolution (100% vector)
  • Valid HTML5


Best jQuery websites design awards