Best jQuery Menus Plugins & Tutorials with Demo

gizmoMenu : Customizable jQuery Context Menus

gizmoMenu : Customizable jQuery Context Menus

gizmoMenu gives you full design control over your site’s context menu. Just copy and paste one of the HTML menu styles and modify it to your liking. All HTML is exposed – allowing you to expand gizmoMenu however you like.

  • Lightweight and easy to use
  • Copy and Paste approach – no lengthy docs!
  • DropDown style contextmenu
  • Hamburger style contextmenu
  • Horizontal style contextmenu
  • Includes 6 color presets
  • Use any menu you want – including MegaMenus!

PriorityNavigation.js : JavaScript Responsive Navigation

PriorityNavigation.js : JavaScript Responsive Navigation

PriorityNav is a lightweight pure javascript plugin that will move your menu items if they don’t fit its parent.

  • No dependencies
  • Smart calculation of available space
  • Flexible
  • Non obstructive menu dropdown
  • Callbacks

Responsive Bootstrap Sidebar Navigation

Responsive Bootstrap Sidebar Navigation

HOE Navigation Menu consist of both Horizantal and Vertical navigation menu based on CSS3 and Jquery. Its lightweight and compatible with almost all major browsers and devices. It supports four levels sub menu with shrink, Overlay and push effect.

Features:

  • Fully Responsive ready for Desktop, Tablets and Mobile
  • Multiple Color options
  • Bootstrap based
  • Options to choose Sidebar Navigation or horizontal navigation

jQuery Menu Puncher

jQuery Menu Puncher

Menupuncher is simple fullscreen navigation plugin for jquery.

Block Scroll : jQuery information Presentation into Blocks

Block Scroll : jQuery information Presentation into Blocks

Block scroll is a jQuery plugin that turns a set of elements into a blocks and displays them one screen at a time. The idea is to break up your page into chunks for better presentation and user-flow. Block Scroll automatically turns your page responsive.

Advanced Off Screen Menu with jQuery & CSS3

Advanced Off Screen Menu with jQuery & CSS3

Think of it as a full-screen off-screen menu on (a)steroids.It is an HTML5/CSS3 responsive solution for using (and making) animated large off-screen menus. It uses CSS transitions that are hardware accelerated and much faster then jQuey animations.

  • 20 responsive presets. (Check the live preview button to test them.)
  • Browser based Editor with 30 presets.
  • Compatible with all HTML5 browsers INCLUDING MOBILE! (IE10+, Chrome, Safari, Opera, Firefox). Tested on iOS and Android.
  • Simple usage, include 2 files (css and js) and add literally 2 lines of code.
  • requires almost NO change on existing HTML sites.

jQuery faceted Taxonomy Browser

jQuery faceted Taxonomy Browser

The jquery faceted taxonomy browser is a simple and intuitive design pattern for browsing hierarchical facets. It is based on a concept called ‘Miller Columns’. If you use the Mac OSX Finder application you can see this feature in action.

jQuery Roulette Wheel Plugin

jQuery Roulette Wheel Plugin

jQuery Roulette Wheel allows you to convert a canvas in a random selection roulette.

  • Allowing to add any number of options, auto-generating a color for each one.
  • A callback function is called when an item is selected.
  • The spin button is rendered in the center of the wheel, instead of using a <button> element

Responsive Menu with Sliding Down Transition

Responsive Menu with Sliding Down Transition

A responsive menu with transitions and fallback support for older browsers. This menu works sliding down the content with a background mask that adjusts to screen height.

  • Responsive
  • Works with a mask
  • Supports scrollbar if content size is bigger than screen size
  • Primarily uses CSS-Transitions and then jQuery as fallback for older browsers.

jQuery Layered Navigation with CSS3

jQuery Layered Navigation with CSS3

Layered navigation allows you to easily implement a new navigation system using the jQuery JavaScript library. It combines the presentation into two sections, you won’t need cutting the images into two, an entire section, and through slides at once. It includes CSS3 animations to show the elements, a side menu to show sections and a progress bar indicates the progress along web site. It allows you to include maps and videos in a fast and easy way.



Best jQuery websites design awards