Best jQuery Menus Plugins & Tutorials with Demo

Build a User Settings Dropdown Menu with jQuery

Build a User Settings Dropdown Menu with jQuery

There are many social networking websites designed with a specific layout in mind. User profile pages are some of the more complex designs included with a community-based network. You’ll often have access to edit user profile settings, subscriptions, and e-mail options. I want to create such a simple menu for a minimalist Digg-style layout.

In this tutorial I have actually built two working demo pages. The first runs on jQuery to fade the menu in and out as you hover. The 2nd demo is built using just CSS effects which display the submenu using the :hover selector. It’s even easier to combine both methods for legacy support – however at that point I’d recommend the CSS-only methodology. But you can see for yourself in the live demo examples and build this yourself by following my code below.

Beautiful jQuery Animated Menu

Beautiful jQuery Animated Menu

Beautiful jQuery Animated Menu is a Basic Menu bar using Jquery ,html and css.This Menu has a Very Sleek and Beautiful Hover Effect.It is quite easy to Implement also quite easy to understand.You can use this Animated jQuery Menu In your projects if you like it.

jQuery Metro Flexible Navigation

jQuery Metro Flexible Navigation

The jQuery Metro Flexible Navigation is a minimal, clean grid layout inspired by the new Windows 8 interface. It can be customized to be laid out horizontally or vertically. It’s scrollable and dragable at the same time and contains useful sliding controls. Icons can be changed, there is a large collection available.

Features :

  • Layout orientation can be customized with a simple class atrribute
  • Scroll-able and drag-able with mouse events and touch swipes (iPad compatible)
  • Control buttons for sliding left, right, up and down the grid area
  • Auto-resize based on browser viewport
  • Well documented + free support + free updates

Create a Sliding Navigation Menu with jQuery

Create a Sliding Navigation Menu with jQuery

Consider a situation where you include your blog categories in a navigation menu. If you have a long category list, a drop down navigation menu will exceed the page height and the user might need to scroll to navigate to the last part of the menu. These small things are enough for a user to navigate away from your site.

To solve that, we are going to create a complete navigation menu using jQuery. I will explain how to compress large menus using sliding panels to keep the depth of your menu to a minimum level. Take a look at the demo before we get started. You can see that sub level menu items are hidden initially and displayed as sliding panels on click.

How to Create a Responsive Navigation in CSS3 & jQuery

How to Create a Responsive Navigation in CSS3 & jQuery

In this post, we are going to walk you through on how to build a simple navigation from the ground and using the CSS3 media queries and a little jQuery to display it in a small screen size like the smartphones properly.

MetroPanel – Navigator for Modern Sites with jQuery,Html5 & Ajax

MetroPanel - Navigator for Modern Sites with jQuery,Html5 & Ajax

MetroPanel is new navigator system for modern sites with following features

Features:

  • Two Panel Position: left and right
  • Unlimited Items
  • Unlimited background
  • AJAX + HTML5 smart load for SEO
  • jQuery + CSS3 Animation Effects
  • Auto Show or Auto Hide Panel
  • Easy Deploy for Almost Sites
  • Many Options for Custom

Simple jQuery Drop Down Menu Tutorial

Simple jQuery Drop Down Menu Tutorial

This tutorial will be more useful for those with knowledge of the basics of jQuery and CSS. The tutorial doesn’t require that much expertise in coding but at least should have basics know-how so that you don’t comment calling it an alien coding lol. Here’s a quick screenshot of our final menu. This tutorial will be more useful for those with knowledge of the basics of jQuery and CSS. The tutorial doesn’t require that much expertise in coding but at least should have basics know-how so that you don’t comment calling it an alien coding lol. Here’s a quick screenshot of our final menu.

Create a Sticky Navigation Header Using jQuery Waypoints

Create a Sticky Navigation Header Using jQuery Waypoints

In this tutorial, we’ll be creating a navigation bar that stays with you as you scroll down — and we’ll also throw a gimmick or two into the mix to polish it off. we’re going to use one of HTML5′s new elements, the navtag, as a container for a horizontal list of links. I’ll briefly explain how to make it look pretty using a little bit of CSS.

Most importantly, you’ll make yourself familiar with the basics of jQuery’s Waypoints plugin, which will provide advanced functionality: as the user scrolls down, the navigation bar will stick to the top of the viewport, as well as change to indicate the current section. As a little added touch, we’ll use another plugin, ScrollTo, in order to provide smooth scrolling and convenient positioning when the user clicks on the navigation links.

jPie jQuery Circular Menu

jPie jQuery Circular Menu

jPie is a Contextual Circular Menu for jQuery.

Here are the features:

  • You can create countless instances and each instance can be fully customizable using the attributes provided by the plugin (DRAGGABLE, CLOSABLE etc…)
  • Fully customizable layouts, using an external CSS and specific themes.
  • Ability to associate to each element of the DOM own context menu
  • Fully compatible with the major browser ( IE, Chrome, Safari,Firefox, Opera)
  • Can replace the context menu of the browser