Best jQuery Menus Plugins & Tutorials with Demo

Nav-bar : jQuery Navigation bar plugin

Nav-bar : jQuery Navigation bar plugin

A navigation bar plugin to follow background with cursor.

Building a Circular Navigation with CSS Transforms & JavaScript

Building a Circular Navigation with CSS Transforms & JavaScript

In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique.

Like I mentioned, there’s going to be some basic math involved, along with CSS transforms to create these styles. But don’t worry, the math is really very simple and I’ll be going through it step by step.

CSS3 Creative Link Effects

CSS3 Creative Link Effects

Today we’d like to share some experimental and creative link effects with you. The idea is to use pseudo-elements and animate them to create a subtle and modern effect. In the examples we are using hover transitions, but you could also imagine these effects on click or as an initial animation.

SimpleSlideView : jQuery plugin for the simplest of sliding views

SimpleSlideView : jQuery plugin for the simplest of sliding views

SimpleSlideView is a nifty little jQuery or Zepto plugin for the simplest of sliding views.This plugin was designed to work well with non-fixed layouts, which means it can be helpful to scroll to the top of the window or container prior to a view changing. If a $.scrollTo plugin is available, SimpleSlideView will attempt to use it by default. It has been tested with jquery.scrollTo and ZeptoScroll.

Box Lid Menu : jQuery Navigation Menus Plugin

Box Lid Menu : jQuery Navigation Menus Plugin

This jQuery plugin creates the box lid effect for navigation menus, and is inspired by Toybox. You can see it in action by hovering your mouse over the menu bar on the left.

Google Nexus Website Menu with CSS3 & JavaScript

Google Nexus Website Menu with CSS3 & JavaScript

A tutorial on how to re-create the slide out sidebar menu that can be seen on the Google Nexus 7 website.It slides out with a really nice effect where some subitems get expanded as well. When hovering over a special menu icon, the sidebar icons will be revealed. When clicking on the icon, the whole sidebar menu will be shown. The first sidebar menu item is a search input which is styled the same way like the other menu items.

We will reconstruct this menu using unordered, nested lists and some CSS transitions. We’ll use JavaScript to apply classes for the opening effects and handling the hover and click events. With the help of a media query, we’ll adjust the size to make sense for smaller devices.

Menutron : jQuery plugin for Responsive Navigation Menus

Menutron : jQuery plugin for Responsive Navigation Menus

Menutron is a jQuery plugin for responsive navigation menus.Menutron transforms your navigation menus from a list to a select menu when resizing your browser. On mobile devices, the select menu pulls up a native control, making it easier to pick an item.

Features:

  • It’s concise – When implemented in a responsive design, your menu becomes consolidated in to a single control, saving you horizontal and/or vertical real-estate.
  • It’s convenient – On mobile devices, the select controls will activate a native control, like the picker control for iOS, which can be navigated using drag, nudge, or flick gestures.
  • It’s intuitive – It works on any type of list (ol,ul,dl) and automatically adds a menu title of “Choose…” for easy recognition

jQuery 3d Mega Menu for Bootstrap

jQuery 3d Mega Menu for Bootstrap

Responsive 3D Mega Drop Down Menu is a flexible and high customizable to build your custom menus. It is very easy to build a horizontal or verticalmenu. In addition to you can set up the menu item drop down by clicking or hovering. You can assign a certain color or choose in 16 colorvariants. There are 2 colors for drop downs (dark and light) and many 2D, 3D effects.

Features:

  • Responsive Design, support any PC or MAC systems, smartphones and tablets
  • Compatible to Bootstrap
  • Horizontal and vertical versions
  • Dark & Light Themes + 16 Additional Colors
  • Many of jQuery effects (flip, wiggle, bounce …)
  • Click/hover behavior choice on the mega menu options page
  • Fly-out Menu with Unlimited Sublevels
  • Dropdown can be fix or full width
  • Cross-Browser Support
  • Form elements styling

Sliding Checkbox Actions menu with jQuery

Sliding Checkbox Actions menu with jQuery

In this tutorial we will create an actions menu with jQuery that appears when checkboxes are selected. This can be a very helpful UI property since we don’t force the user to scroll to the place where the actions are – they just appear whenever the user needs them.

Additionally, the user can drag the actions box to the place that is more practical for him, and the box will always follow when the user scrolls the page. It will also show a count of how many checkboxes were selected.

jQuery Pull-Out Content Panel with CSS3 Animation

jQuery Pull-Out Content Panel with CSS3 Animation

This panel has been created to fit into any website with a clean and professional design. It can be fixed on the left or on the right and can contain any type of content : headings, texts, lists, images, videos, etc. The custom scrollbars packed in this menu will automatically appear when needed and if you need to add even more content, you can use the infinite carousel to scroll between each part of the panel.

Features:

  • Powerful sliding side panel
  • Left or right position
  • Custom automatic scrollbars
  • Infinite sliding carousel
  • Toggle elements
  • CSS3 animations
  • Styled typography
  • Simple working contact form
  • For any type of content
  • Font-Awesome icons
  • Fits into any page
  • Clean and professional design
  • Cross-browser support
  • Designed for desktop computers, tablets and mobiles