Best jQuery Menus Plugins & Tutorials with Demo

jElevator : jQuery Inter-Page Navigation Tool

jElevator : jQuery Inter-Page Navigation Tool

jElevator is a jQuery plugin that allows webmasters to enhance the navigation of their blog, news, and other content-rich websites. Providing users with scroll-to-top, scroll-to-bottom, and sections menu functionality, jElevator will increase the usability of any page it is added to. This plugin is a perfect fit for pages that contain lengthy content, such as a news/blog post, detailed documentation, or a robust informational page. jElevator will allow users to jump to the information they’re seeking, check the title or date of a news article, or post a comment at the bottom of the page, all without losing their place or having to tediously scroll up and down in search for specific content.

Features:

  • Auto-Hide Menu
  • Scroll-To-Top Button
  • Scroll-To-Bottom Button
  • Automatic Sections Menu

Zig Zag Dropdown menu concept with CSS3

Zig Zag Dropdown menu concept with CSS3

I found this two years old Dribbble shot by Ignacio Giri. Don’t ask me how, I just don’t remember how did I stumble upon it but one thing is clear: I bookmarked this dropdown menu concept, stared at it a bit and then I thought about making something similar with CSS.

jquery.arbitrary-anchor.js : jQuery Smooth Scrolling

jquery.arbitrary-anchor.js : jQuery Smooth Scrolling

With jquery.arbitrary-anchor.js , you can easily create useful and neat dynamic anchor scrolling by simply adding a jQuery/CSS selector after the hash (#) in your page’s URL. This plugin extends the normal anchor functionality, that is, an anchor tag with a name value attribute will still get scrolled to as normal. The same goes for an element with an ID which matches the hash. This little plugin will take care of everything else.

Transitions for Off-Canvas Navigations with CSS3 & JavaScript

Transitions for Off-Canvas Navigations with CSS3 & JavaScript

Today we’d like to share another set of transition effects with you. This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu. The idea is to show some hidden sidebar with a subtle transition on the element itself and also on the remaining content. Usually the sidebar slides in, pushing the other content to the side. But there are many more possibilities for subtle and fancy effects and today we want to give you some inspiration.

slimMenu : jQuery Responsive & Multi-level Navigation Menus

slimMenu : jQuery Responsive & Multi-level Navigation Menus

slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.With slimMenu, you’ll no longer struggle with media queries to create responsive menus, or any other heavy plugins to create multi-level nested menus.

Features:

  • Multi-level nested menus.
  • 100% mobile responsive menus.
  • Multiple slimMenu navigations on the same page.
  • Tap areas to toggle sub menus easily in touch devices.
  • Hover option and effects for desktop version.
  • Submenu indentation options for responsive version.

AnimateScroll : jQuery Plugin for Animating Scroll

AnimateScroll : jQuery Plugin for Animating Scroll

AnimateScroll is a jQuery plugin which enables you to scroll to any part of the page in style by just calling the animatescroll() function with the Id or Classname of the element where you want to scroll to.

It gives power to the user with its various options to customize the style of scrolling, scroll speed and many more. Supports more than 30 unique Scrolling Styles.

scrollIt.js : jQuery plugin to Vertically Scrolling Pages

scrollIt.js : jQuery plugin to Vertically Scrolling Pages

A jQuery plugin that makes it easy to create paginated, feature vertically scrolling pages.

Features:

  • Easy to implement: One JS call, just put data- attributes on the DOM
  • Lightweight: ~1kb minified
  • Active Class: Your navigation is updated automatically
  • Configurable: Set the animation easing, duration, callbacks and more
  • Keyboard Navigation: Press the up and down keys to move…

Google Play’s Multi-Level Navigation with jQuery & CSS3

Google Play’s Multi-Level Navigation with jQuery & CSS3

Google have recently released a new Google Play website complete with a new redesign and what caught my attention was the way they implemented their navigation bar. With the smooth animation and how they let users peek at the root-level menu by simply hovering a back button, I decided to build a similar navigation menu from scratch using HTML, CSS and jQuery.

jQuery Scroll Sections Plugin

jQuery Scroll Sections Plugin

A plugin that allows you to define (full page) sections and scroll between them with mousewheel, keyboard, scrollbar and/or touch moves.

menuSlider.js : Simple jQuery Menu Slider

menuSlider.js : Simple jQuery Menu Slider

Simple jQuery menu slider.Call the menuSlider on the container ({Border Thickness, Border Style, Border Color, Sides of Border, Background Color, Background Border Radius, Transition Speed, Transition Type}).The item the slider returns to has an class of “selectedMenuItem”. To switch which item is the current item, change which item has the selectedMenuItem class. I achieved it above by adding a click function in the script .