Best jQuery Menus Plugins & Tutorials with Demo

Vertical Fixed Navigation with CSS & jQuery

Vertical Fixed Navigation with CSS & jQuery

A smart vertical navigation, with round indicators that turn into labelled icons when the user interacts with them.

Inspiration for Line Menu Styles with CSS3

Inspiration for Line Menu Styles with CSS3

The line is an amazing design element. It’s so versatile and it allows us to use it for adding enjoyable animations or enhance points of interest. Today we’d like to share a set of ideas for using the line as a design element in horizontal menus. There are many creative possibilities, some minuscule and subtle, others bold and more extravagant. We’ve prepared a little inspirational set for you where we explore some line menu styles.

Full Screen Navigation with jQuery

Full Screen Navigation with jQuery

“Full Screen Navigation” is a navigation plugin ready to use on mobile devices and desktop devices. It’s a non-conventional navigation component to provide a modern look to your website. Is very customizable, compatible with the major browsers and has a high level documentation.

jQuery contextMenu plugin & polyfill

jQuery contextMenu plugin & polyfill

contextMenu is a management facility for – you guessed it – context menus. It was designed for an application where there are hundreds of elements that may show a context menu – so intialization speed and memory usage are kept fairly small. It also allows to register context menus without providing actual markup, as $.contextMenu generates DOMElements as needed.

Material Design Slider Animation with CSS3

Material Design Slider Animation with CSS3

A Material Design inspired slider with effective communicating animations.Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.

Animated Fixed Menu with CSS3 & jQuery

Animated Fixed Menu with CSS3 & jQuery

Fixed menus are a definitive a great ux resource for our website. They look good, and they are also super useful for visitors. Today, I’m showing you how you can create a very simple fixed menu with CSS3 transition

Vertical Layout with Navigation

Vertical Layout with Navigation

Vertically scrolling sections of content with a slick mobile hamburger navigation.

Stretchy Navigation in CSS & jQuery

Stretchy Navigation in CSS & jQuery

A rounded navigation trigger that stretches on click/tap to reveal the navigation items.

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.