Best jQuery Menus Plugins & Tutorials with Demo

Context.js : jQuery Contextual Menus with Twitters Bootstrap CSS

Context.js : jQuery Contextual Menus with Twitters Bootstrap CSS

Context.js is a lightweight solution for contextual menus. Currently, there are two versions.

The first is to be used with Twitters Bootstrap (bootstrap.css specifically). If you do not use or want to use bootstrap.css, there is a standalone stylesheet to give the menu it’s base styles.

Features:

  • Linted: Valid JS
  • Can be used with or without Twitters Bootstrap.css
  • Event Based Links
  • Anchor Links
  • Headers
  • Dividers
  • Recursive Menus (infinite depth)
  • Vertical Space Detection (turns into a “dropup”)
  • Horizontal Space Detection (Drops to the left instead of right)
  • Add/Delete menus Dynamically

Animate to Hide and Slide Content with jQuery

Animate to Hide and Slide Content with jQuery

In this tutorial I want to demonstrate how we can build a similar interface using jQuery animation. These codes are fairly basic and should work in any fixed-style website layout. This type of design leaves room for hidden content, along with main content cascading down the page.

Ideally we will be using jQuery animations powered by jQuery UI easing effects. I have created a live example with the navigation bar fixed onto each corner of the webpage. Check out some of my demos and see if this interface could work well in any upcoming design projects.

jQuery Wheel Menu

jQuery Wheel Menu

Wheel Menu is a small jQuery plugin that will add a fully customisable Path-like wheel menu button to your website.

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.