20+ Awesome jQuery Powered Web Site Navigation Scripts

December 23, 2012 · 6 comments

by Lars

20+ Awesome jQuery Powered Web Site Navigation Scripts

Navigation is one of the most important elements of a web site and this is why you want to get it right. With jQuery there are typically tons of scripts available for a particular area, but navigation is a bit different. There are great scripts available, however there are not so many as you could expect. jQuery provides several advantages for navigation and jQuery sliders for images can also be useful to give alternative way for users to navigate. It is typically a light weight approach to add cool features like animation and event handling (like mouse over). This article provides more than 20 must see jQuery navigation solutions you simply need to check out! A jQuery countdown effect is also a useful technique to make websites more dynamic, and so is jquery calendar plugins.


ElegantThemes
ThemeForest

Advertisement

Beautiful Slide Out Navigation

Beautiful Slide Out Navigation

This tutorial will show you how to create an amazing slide-out menu or navigation. The navigation will 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 this technique can spare you some space on your website.

Search Box with Filter and Large Drop Down Menu

Search Box with Filter and Large Drop Down Menu

This search box reveals a drop down menu after the user clicks into the input field. The menu is meant to act as a filter with several checkbox options that allow the user to select specific categories for his search. When the user hovers out of the input or the filter box, the drop down will disappear.

jQuery MegaMenu 2

jQuery MegaMenu 2

jQuery MegaMenu 2 is a quite feature rich navigation plugin that allows you to create awesome mega menus with HTML content.

Cut & Paste jQuery Mega Menu

Cut & Paste jQuery Mega Menu

Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor.

Mega Drop Down Menu w/ CSS & jQuery

Mega Drop Down Menu w/ CSS & jQuery

In this tutorial, the author demonstrates his technique for creating a menu system that would be ideal for large or e-commerce web sites.

Sexy Drop Down Menu w/ jQuery & CSS

Sexy Drop Down Menu w/ jQuery & CSS

Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.

Superfish – jQuery menu plugin

Superfish – jQuery menu plugin

Animated Menus Using jQuery

image

In this tutorial you will learn how to create this amazing animated effect menu just with plain Xhtml,CSS and Javascript.

Create a Cool Animated Navigation with CSS and jQuery

image

Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. While traditionally Adobe’s Flash was the goto for anything animated, these days with the magic of javascript we can avoid Flash altogether. In this tutorial you are going to build a really cool animated navigation menu using just CSS and jQuery.

jQuery Simple Drop Down Menu

jQuery Simple Drop Down Menu

This is a tiny 1kb navigation script squeezed down to only 20 lines of code. You can create the main menu structure using HTML unordered list. Using of an unordered list for navigation is a very good practice. First of all it is semantically correct, it is also handy for changing/editing especially in compound treelike cases.

Simple jQuery Dropdowns

image

This is a very stripped down navigation code with minimal needs for styling. However still it has all the functionality typically needed.

Smooth Navigational Menu

Smooth Navigational Menu

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that’s a good thing given the important role of this element in any site. The menu’s contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek “slide plus fade in” transition is applied during the unveiling of the sub menus. The menu supports both the horizontal and vertical (sidebar) orientation.

Some noteworthy features- You can specify a delay before the sub menus appear and disappear when the mouse rolls over and out of them, respectively. The sub menus reposition themselves if too close to the window’s right edges. And last but not least, the depth of the accompanying shadow can be customized, or removed altogether.

jQuery Multi Level CSS Menu

image

This is a multi-level horizontal CSS menu created using a regular nested HTML list only as far as markup, then transformed into a fully functional drop down menu using CSS and a touch of jQuery. A fade effect is enabled by default, and sub menus will automatically readjust themselves horizontally if too close to the window’s right edge. This is what happens when CSS and JavaScript decides to work together!

A Perfect Multi-Level Navigation Bar

A Perfect Multi-Level Navigation Bar

Simple unlimited levels vertical drop down navigation menu jquery plugin

Simple unlimited levels vertical drop down navigation menu jquery plugin

jdMenu Hierarchical Menu

jdMenu Hierarchical Menu

The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications. View the feature list below to see if jdMenu is the solution for you.

Stylish Navigation Menu With jQuery

Stylish Navigation Menu With jQuery

In this tutorial we are going to make a stylish CSS + XHTML navigation menu with the help of the jQuery library. The entire navigation menu is basically one unordered list. You can introduce new menu items by just adding more LI elements and setting their respective text and target URLs. The animated feature when mouse is hovered over a menu item is pretty cool.

jQuery Basic Menu

jQuery Basic Menu

It’s a drop down menu, which behaves like an application menu (click to open, click to close, stays open even after hovering elsewhere). It supports menu creation through HTML markup or through JavaScript. The plugin tries to position its submenus inside the visible area when there is not enough space at the right or bottom border (dimensions plugin required).

jQuery iPod-style Drilldown Menu

jQuery iPod-style Drilldown Menu

This drilldown menu provides easy navigation of complex nested structures with any number of levels. The entire menu sits within a fixed-size area, and when a node is selected, breadcrumb links appear above the menu options to both deliver feedback and allow quick access back to nodes higher up in the hierarchy. A lateral iPod-style slide transition reinforces the notion that you’re moving forward into more granular data, or backward into higher-level data. This menu is specifically useful in traversing deeply nested hierarchies, particularly those more than three levels deep. It also provides a more usable alternative to multi-level fly-out menus, which can present challenges to those with limited manual dexterity.

jQuery ListNav Plugin

jQuery ListNav Plugin

This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the basic functionality.

Lava Lamp for jQuery lovers!

image

Extremely light weighted Lava lamp menu packaged as a plugin for the amazing jQuery javascript library.

References

Find more about jQuery here:

{ 2 comments… read them below or add one }

Furkan May 1, 2012 at 12:53 pm

very nice, these days stirred up curiosity

Reply

Ben Linford January 29, 2011 at 9:58 pm

jQuery MegaMenu 2 looks amazing.
Will definitely be trialing it.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

{ 4 trackbacks }

Previous post:

Next post:


Web Analytics