Best jQuery Menus Plugins & Tutorials with Demo

Multi-Level Menu with CSS3 & JavaScript

Multi-Level Menu with CSS3 & JavaScript

A simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button.

The idea is to animate each menu item once a level is changed. The animation starts with the item clicked and the delays are propagated through the neighbors. The animation delays follow the same logic for the incoming items of the new level of the multi-level menu. As optional elements we have a breadcrumb navigation and a back button (not shown in our demo). Deeper levels are referenced with a data attribute

Dropit : jQuery Dropdown Menu Plugin

Dropit : jQuery Dropdown Menu Plugin

Dropit is a jQuery plugin for single level dropdown menu’s. Nothing fancy pants in here. Just simple and flexible dropdown’s in jQuery.

Animating an SVG Menu Icon with Segment

Animating an SVG Menu Icon with Segment

A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating SVG paths.

Allec AJAX Off-Screen Menu

Allec AJAX Off-Screen Menu

Allec Off-Screen Ajax Menu is a perfect solution for agency and portfolio websites to enhance modern design and futuristic feel because of palette grid and off-screen positioning.

Fully ajax support maintains dynamic loading without a need to refresh the page. It is an extra advantage your users will highly appreciate as there won’t be waiting time anymore, only instant content appearance. Happy users equals successful business.

  • Pure JavaScript
  • Ajax Support
  • Palette Grid Modern Layout
  • Overlay Menu Effect
  • Mobile Optimized
  • Fast Performance
  • Light Weight Navigation
  • Custom Scrollbar
  • Smooth Animation
  • SVG Graphic
  • Retina Ready

Trunk.js : A responsive Navigation Web solution

Trunk.js : A responsive Navigation Web solution

Trunk.js is a responsive web solution for creating better navigation and layouts. It tucks your navigation into the “drawer” on many devices, and while it triggers with jQuery, it moves with CSS for a much smoother effect.

jQuery Instant Responsive Menus with CSS3

jQuery Instant Responsive Menus with CSS3

Create different type of menus on the fly without changing the HTML Structure. Just replace CSS class names in the HTML markup to make a horizontal menu or any menu to function like a one page scroll menu, vertical menu, toggle menu, slide out menu, full screen navigation, tabbed menu, dots navigation and much more.

Features:

  • One Page Smooth Scroll support
  • Customizable CSS3 animation effects (Faster than jQuery Animations)
  • Fully Responsive
  • Unlimited Color Themes
  • Light weight
  • Built with CSS3 and improved with some jQuery
  • Compatible with bootstrap

nuContextMenu : jQuery Context Menu

nuContextMenu : jQuery Context Menu

A modern context menu with font awesome support for web apps. The script is extremely light weight (2.2 kB), and it treats the menu as the primary object. This means that a single menu can be attached to multiple elements.

uilang.js : UI-focused Programming Language

uilang.js : UI-focused Programming Language

uilang is a dead simple programming language for web designers. With uilang, you write your code just like plain English, straight into your HTML using a <code> element. uilang’s logic relies on manipulating classes on HTML elements and using these classes in CSS to show, hide, animate and transform elements when a click occurs. This simple logic lets designers create most of the typical user interface behaviours: tabs, popovers, overlays, sliding menus, etc.

Demo 1 Demo 2 Demo 3 Demo 4 Demo 5

Fixed Responsive One Page Nav

Fixed Responsive One Page Nav

Responsive, fixed and touch friendly one page navigation with animated scrolling.

Features:

  • Fixed positioned, always visible navigation bar
  • Uses vanilla JavaScript, no jQuery required
  • Smooth animated scrolling
  • Removes 300ms tap delay
  • Adds a mask over the content when navigation is open
  • Auto highlights current location
  • Uses a tiny custom font for icons (only two characters included)
  • Closes the navigation when user tap’s outside of it

Page Stack Navigation with CSS3 & JavaScript

Page Stack Navigation with CSS3 & JavaScript

A template for a simple page stack navigation based on the Dribbble shot by Ilya Kostin, Stacked navigation.The idea is to show a navigation when clicking on the menu button and transform all pages in 3D and move them to the bottom of the viewport. The next two pages are shown in the back of the current page as a stack. When clicking on a menu item, the respective page comes up.