WEBJX collects 45 jquery navigation plug-ins and Tutorials

45 jquery navigation Plug-ins and tutorials. The initial 15~20 of a new user's visit to a website has a big impact on their preferences, prompting them to decide whether to stay or not. So it's important to develop an intuitive, easy-to-use, style-appropriate navigation to help users get started. The tutorials in this article show not only the strength of jquery, but also the many possibilities of navigating creative design.

Horizontal Menu navigation Plugins and tutorials

Mega Drop down Menu w/css & JQuery Demo
According to usability expert Jakob Nielsen, mega drop down menus tested to is more efficient for large-scale web Sites. In this tutorial, the author demonstrates he technique for creating a menu system that would is ideal for large or e-comm Erce Web sites.

A Perfect Multi-level navigation Bar Demo
In this tutorial, the author illustrates he method for implementing a perfect multi-level navigation bar using HTML, CSS And some lines of unobtrusive JavaScript code with JQuery to show and hide sub-sections.

Use sprites to Create a navigation Menu Demo
CSS sprites can dramatically increase a website ' s performance, and with JQuery, we can easily implement awesome Effects.

Tab Navigation with Smooth horizontal sliding
In this tutorial you'll create a navigation menu that slides horizontally. It begins with a set of "tabs" in the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back.

droppy–nested drop down menus
This isn't the most flexible of plugins, but if you are looking for a basic menu, it ' s perfect.

jQuery Listmenu Demo
This jQuery plugin allows your to easily convert a long, hard-to-navigate list into a compact, Easy-to-skim First-letter-ba SED menu system, allowing quick and out-of the-way access to hundreds of items.

kwicks for JQuery Demo
Kwicks for JQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has I Nto a highly customizable and versatile widget.

Creating a navigation Menu with CSS & JQuery
In this tutorial you'll learn how to builds a CSS navigation menu with a smooth scroll using jQuery and the effect Plugin.

Apple Style Menu Demo
In this in-depth tutorial you ' ll create a apple-flavored leopard-text-indented menu from scratch. The "ll build" menu in Photoshop, then you'll create the needed HTML and CSS, and finally improve it with jQuery.

Sexy Drop down Menu w/jquery & CSS Demo
Most drop-down menus may look aesthetically pleasing, but developing them to degrade gracefully. Also. In this tutorial, the author shows your how to create a sexy drop-down menu that degrades gracefully.

Mega drop-down Menu with JQuery Demo
The recommended hover time for a mega Drop-down menu are 0.5 seconds, with a further 0.5 seconds delay when the user moves The mouse away. With these guidelines, the author demonstrates you to build a mega Drop-down menu with usable time delays.

JQuery Pager Demo
jquery Pager is a simple jquery plugin to provide paging functionality for Data-driven Web applications.

Simple jQuery dropdowns Demo
JQuery menus don ' t have to be complicated; Sometimes you could want to try something slightly different by making them as simple as possible. This menu plugin has stripped down code with minimal styling, yet still all has functionality the typically.

Smooth animated Menu with JQuery Demo
In this tutorial you'll learn how to build a jQuery menu and animate it with some lovely and smooth, using the effects >jquery easing plugin.

Stylish navigation Menu with JQuery Demo
In this menu tutorial there are three main classes that define the looks: –for the normal state of the normalMenu navigation L Inks, hoverMenu –lighter link that slides down on the hover, selectedMenu –the Active (selected) state.

Easy to Style jQuery Drop down Menu Demo
This tutorial'll show you and easily-styled menu with Hover mouse event and the most basic jQuery Animation using Slideup and Slidedown.

A different Top navigation Demo
If you are trying to make your website stand out, you might consider thinking outside the "norm" where it comes to navigatio N. In this tutorial, and you'll be doing precisely so, by creating a different the multi-layered horizontal navigation system th At ' s still intuitive enough for anyone to use for the '.

vimeo-like Top Navigation Demo
If you have ' ve ever visited the Vimeo home page you could have noticed the menu that drops down the Search box, offering you different search options to narrow your search. You'll learn to recreate this effect the This tutorial.

JQuery "D Bread crumb–jbreadcrumb
This is collapsible breadcrumb jQuery plugin has been developed to deal with deeply-nested, verbosely-named pages. Rather than limit the amount of elements shown on the sever side, the developers opted to go with a client side solution F or usability and SEO. It also turned out to be nice to look at and fun to play with.

Idtabs
The Marvelously-versatile idtabs plugin makes adding tabs to a website very simple and opens the door to endless n Possibilities. The homepage of this plugin shows you are not ' only "easy idtabs are to use and style, but also demonstrates many of the Navi Gation Options ' ll have at your disposal.

Keypress Navigation Demo
With JQuery, the your website ' s navigation doesn ' t have to is limited to mouse-based. In this highly-original experimental tutorial your ' re shown how to let the user navigate your site using their keyboard.

Sliding jQuery Menu Demo
In here tutorial you'll learn how to create a sliding menu button and similar to the effect you can psdtuts+ homepage. When the ' button is ' clicked it rolls out a box with full ' links, when the ' button is clicked again ' box rolls back in.

Dropdown, IPod Drilldown, and flyout Styles
This ipod-style menu plugin provides easy navigation of complex nested, with any number of structures. The entire menu sits within a fixed-size area, and where a node is selected with default a "Back" link appears below the men U to allow navigation to previous (parent) menus.

Flickr Menu Design Demo
This is a simple step-by-step tutorial so shows to implement a flickr-style menu with cool sliding using JQuery and CSS.

Fixed Fade out Menu Demo
The aim of this tutorial are to builds a fixed navigation that follows the user when they scroll up or down, and only subtly Showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again. The navigation includes some links, a search box, and top and bottom buttons the "let" user navigate to the top or Bott Om of the page.

mb.menu Demo
Mb.menu is a powerful jQuery component that helps your build an intuitive multi-level tree menu or contextual (right click) Menu. Can add as many submenus as you want; If your sub-menu or menu isn't declared in the page, the component'll get it via Ajax, calling the template page with T The He ID of the menu and you need (the value of the "menu" attribute).

Mcdropdown
The Mcdropdown plugin is a UI control this lets users select from a complex hierarchical tree of options that allows for B Oth Mouse and keyboard entry. The overall effect of this plugin are somewhat similar to the Microsoft Windows "Start > All Programs" menu.

Vertical or Sidebar Plugins and tutorials

Simple JQuery accordion Menu Demo
This is a very simple accordion menu plugin built with JQuery. The links with sub-items under them would expand the sub-menu when clicked and items, don ' t have sub-items-are normal l Inks. The menu would initialize with the expanded sub-menu.

tabbed Structure Menu Demo
This tutorial would show your how to build your own space-saving, tabbed interface using JQuery with Slidedown/slideup effec T.

Fresh Content Accordion Demo
In here tutorial you'll earn how to build a simple, yet eye-catching accordion with the help of CSS, JQuery and the easing Plugin for fancy effect.

Horizontal Scroll Menu Demo
This tutorial teaches you to create a horizontal scrolling menu which scrolls automatically according to your mouse S-y movement and uses the Jquery.color plugin to animate the background-color changes.

Create a slick tabbed Content area using CSS & JQuery Demo
In this tut you'll learn how to builds a simple little tabbed information box in HTML, then make it function using pure JAV Ascript, and finally you'll learn a way to achieve the same using JQuery.

Slide out and Drawer Effect Demo
The Apple Web site is a great demonstration of this effect in action where the mouse settles on the title of the ' section ' And the associated links are exposed. What makes this effect particularly the "that" drawers maintain a fixed height and slide between a restricted area.

"Outside The box" Navigation with JQuery Demo
This tutorial offers three different ' Out-of-the-box ' OS X dock-style options. There are the, as expected, horizontal and vertical examples, and finally the very cool OS X stack and drop stack.

Sproing!–thumbnail Menu Demo
sproing! is a plugin this creates an elastic effect for your navigation that magnifies the menu items when they are.

Cool Animated navigation Demo
In this tutorial you'll learn how a really cool animated navigation menu with background position using Just CSS and JQuery.

jQuery File Tree Demo
jquery file tree are a configurable, Ajax file browser plugin for jquery. You can create a customized, fully-interactive file, and as little as one line of JavaScript code. Currently, Server-side Connector scripts are available for PHP, ASP, ASP.net, JSP, and Lasso. If you are a developer, you can easily make your own connector to work with your language of choice.

creating a floating HTML Menu Using jQuery and CSS Demo
For the US who deal with long web pages and need to scroll to the top for the menu, this tutorial offers a nice Alterna tive:floating Menus as you scroll a page. This is built using HTML, CSS and JQuery, and it ' s w3c-compliant.

BDC DrillDown menu, an ipod-style menu Demo
A drill-down menu takes up constant spaces like a accordion menu but offers the deep hierarchy of a fly-out menu at the SA Me time. Because of this, it isn't only features a small footprint but are also easier to navigate than a fly-out menu, where more MoU Se movement and accuracy are required.

jQuery context Menu Plugin Demo
The goal of this plugin is to streamline the way actions bind to menu items and to use 100% CSS for styling. Keyboard shortcuts have been added for navigation once the ' menu is opened, and there are five-methods that would allow you To control and clean-up your The fly of the context menu.

A ' Mootools homepage ' inspired navigation Demo
This tutorial takes your through the process of developing the menu that had previously been in used on the homepage of Mo Otools, but with JQuery.

JQuery UI Selectmenu
The jQuery UI Selectmenu plugin has been designed to duplicate and extend the functionality of a native HTML select Elemen T, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it's built with progressive enhancement and accessibility in mind and allows all native mouse and keyboard co Ntrols.

beautiful Slide out navigation Demo
In this tutorial your are shown to create a amazing slide-out menu or navigation. The navigation would be almost hidden-the items only slide out when the user hovers over the "area" next to them. This gives a beautiful effect and using to technique can spare you some spaces on your website.

Optional Horizontal or Vertical navigation

Smooth navigational Menu
This menu ' s contents can either is reached from either direct markup on the page, or a external file and fetched via Ajax . And to JQuery, a configurable, sleek ' slide plus fade in ' transition is applied during the unveiling of the sub men us. The menu supports both the horizontal and vertical (sidebar) orientation.

superfish–suckerfish on "Roids Demo
Superfish is a enhanced suckerfish-style menu JQuery plugin that takes a existing pure CSS drop-down menu (so it degrade s gracefully without JavaScript) and adds the following enhancements:timed delay on mouseout, animation of sub-menu L, keyboard accessibility, drop shadows for capable browsers and much more.