Best jQuery Menus Plugins & Tutorials with Demo

jQuery Vertical Responsive Menu

jQuery Vertical Responsive Menu

Collection of Responsive Vertical Menus, with 20 color schemes, cross-browser support and easy integration. Responsive Vertical Menu can be used in sidebars of any site as well as admin dashboards.

Features :

  • Responsive.
  • Cross-Browser.
  • 20 Color Schemes.
  • Animated.
  • Easy Integration.

Responsive Nav : Responsive navigation plugin with JavaScript & CSS3

Responsive Nav : Responsive navigation plugin with JavaScript & CSS3

Responsive Nav is a tiny JavaScript plugin which weighs only 1.7 KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions.

Horizontal Slide Out Menu with CSS3 & JavaScript

Horizontal Slide Out Menu with CSS3 & JavaScript

A horizontal slide out menu with a grid-like thumbnail layout for the submenu. With media query examples for smaller devices. The menu slides out from the top when a main menu item is clicked and the sub-items fade in. When clicking on another item, the height of the submenu will adjust and the content will fade in and out while switching.

Some media query examples show how to make the menu responsive and change the view to a touch-friendly vertically stacked navigation.

Responsive Retina-Ready Menu with CSS3 & JavaScript

Responsive Retina-Ready Menu with CSS3 & JavaScript

Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, we will use an icon font so that the icons of the menu won’t get pixelized on resize.

Blocks – jQuery CSS3 Responsive Menu

Blocks - jQuery CSS3 Responsive Menu

“Blocks – Responsive Menu” is navigation component based in jQuery and CSS. It is a responsive menu component and can be used in various website types.

Features:

  • 8 Styles
  • Javascript/CSS3 effects
  • Icon Support
  • Collapsible
  • Cross Browser
  • Easy to use
  • Easy to customize

FlexNav : jQuery Plugin for Responsive Menus

FlexNav : jQuery Plugin for Responsive Menus

FlexNav is a mobile-first example of using media queries and jQuery to make a decent site menu with drop downs. Special attention is paid to touch screens using touch events and tap targets. This is something I use to test different navigation techniques and may change as I iterate over different solutions to the problem. Basically I want a simple model to build upon when working on sites from scratch.

Features:

  • Multiple nested sub menus
  • Tap targets to reveal sub menus for touch screens
  • Hover reveal for desktop
  • Keyboard tab input accessibility
  • Fallback for no JavaScript
  • Fast clicks for touch screens (no 300ms delay)
  • Use class .one-page on the body, .menu-button, and ul.flexnav for single page fixed menu

 

Horizon Slide Navigation jQuery Plugin

Horizon Slide Navigation jQuery Plugin

Horizon Menu is a dedicated jQuery plugin where you can create custom menus that slide beautifully in your web browser. It’s reponsive, meaning mobile first. Mobile and tablet UI is fullscreen meaning it’s user-friendly and easy to navigate.

Features:

  • IE8+ Compatible
  • Full browser support
  • Cross Compatible Device Ready
  • 120+ Fully Scalable Icons Font
  • 6 Themes with the ability to create your own
  • CSS3 animation support with IE fallback
  • Position your menu on the left or right side of your browser
  • As many menu items and submenus as you desire
  • Animation in and animation out fully supported
  • Fullscreen for media with window sizes
  • PC, Mobile and Tablet Touch Compatibility

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.


Best jQuery websites design awards