Best jQuery Menus Plugins & Tutorials with Demo

headroom.js : Hide your header until you need it

headroom.js : Hide your header until you need it

Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user’s scroll. The header on demo site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.

jQuery CSS3 Slider Timeline Menu

jQuery CSS3 Slider Timeline Menu

Learn to create a slider timeline menu with CSS3 animations. It is a fixed navigation that smooth scrolls to new sections with a cool slider effect.You can click on each link as well and it will smooth scroll along with adjusting the dial to the selected section. I liked this idea and took it a step further with giving each section a color. The slider background color will fade to the selected section’s color.

jQuery Fly Side Menu

jQuery Fly Side Menu

Fly Side Menu is a script that will recreate the impressive animation you see on Airbnb’s new iOS7 app using jQuery and CSS3. In additional to that, I’ve also added a few more options for you guys to play around with.

Wonderful CSS3 Flat Menu

Wonderful CSS3 Flat Menu
  • Pure CSS3
  • Full responsive
  • Clean flat design
  • Multilevel dropdown menu
  • 17 Preset color schemes
  • Multi-column content
  • Left or right item alignment
  • Fullwidth dropdown
  • Font Awesome icons
  • Well documented

Jeegoocontext : jQuery ContextMenu plugin

Jeegoocontext : jQuery ContextMenu plugin

Jeegoocontext is a jQuery plugin that allows for multiple custom contextmenus (pop-up menus) to exist on a single page. The plugin is able to transform any unordered list appended to the body into a multi-level, intelligently positioned styled contextmenu via a single call.

jQuery Full Page Navigation

jQuery Full Page Navigation

jQuery Full Page Navigation is a simple script that let you create a full page navigation (navigation shown as columns) dynamically with one JS call. You can define how your navigation will be divided, how fast/slow the animation will be and many more features.

stickUp : jQuery Plugin to “sticks” an Element

stickUp : jQuery Plugin to "sticks" an Element

stickUp is a jQuery plugin, which you can implement on any webpage alongside jQuery. You can easily make any element, on any page, stick to the top of the browser window as the user scrolls past it. This feature is excellent for navigation menus, logos and/or contact information, which you may want the user to see at all times.

jQuery Bootstrap-style Dropdowns

jQuery Bootstrap-style Dropdowns

One of my favorite Boostrap plugins is dropdowns, but I had a bit of difficulty getting started with them. The docs say you can apply a dropdown to nearly any element, but they really seem to work best with Bootstrap’s navbar, tab, and pill components. Since I was retrofitting an app that was around long before Bootstrap, this wasn’t going to work for me. That and I was hoping to get a scrollable dropdown (with tips!) and a few other features out of the deal. Thus, this plugin was born.

While the appearance of these dropdowns is almost identical to those of Bootstrap’s, it’s important to note that JavaScript for this plugin was developed entirely from scratch. Some CSS was borrowed, however, especially for generating those gorgeous tips.

MetNav 2 : Another jQuery Metro UI navigation menu

MetNav 2 : Another jQuery Metro UI navigation menu

MetNav 2 is jEffectBox’s 2nd jQuery navigation menu plugin based on Window 8 Metro theme. It’s very lightweight and looks good on almost all major browsers and devices. It’s a Windows 8 Tile base navigation menu which supports unlimited sub menus. It supports responsive design and works well on touch devices.This plugin is dedicated to all Metro lover in the world.

Features:

  • Supports unlimited number of sub-menus.
  • Supports responsive design.
  • Looks good in almost all major browsers and devices.
  • Very easy to integrate to any website.
  • Full documentation included.
  • Very lightweight, only 3kb of JavaScript (minified version is 2kb).
  • Control appearance through CSS, so it can be restyled.
  • Supports touch devices.

jQuery Jump To : Create a smooth jump to Sub Navigational Menu

jQuery Jump To : Create a smooth jump to Sub Navigational Menu

A jQuery plugin that let you create a smooth jump to sub navigational menu in one JS call.The menu can be used to assist your navigation for pages with a lot of content.