国外网站应用广泛的20个jQuery网站导航菜单脚本

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. 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!

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.

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.

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.

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

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.

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

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.

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.

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

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

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

Simple unlimited levels vertical drop down navigation menu jquery plugin

The jdMenu plugin for

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.

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).

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.

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.

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

赞

365据说看到好文章不转的人，服务器容易宕机！

标签：jQueryJS Widget插件

原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/javascript/149.html