导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容。这里最大的部分是开发一个菜单,即要直观易用,又要符合你网站的设计风格。本文列举了20个必看的jQuery的导航插件和教程,演示通过jQuery实现一些导航效果,教您如何做一个有创造性和易于使用的导航。

美丽滑出导航

在本教程中,展示了如何创建一个惊人的滑出式菜单或导航。这给出了一个漂亮的效果,使用这种技术可以节省您在网站上一些空间。

Search Box with Filter and Large Drop Down Menu

这个搜索框显示一个下拉菜单后进入用户点击输入字段。该菜单是作为一个过滤器的行为与几个复选框选项,允许用户选择特定类别的搜索。当用户将鼠标悬停下拉就会消失。

jQuery MegaMenu 2

这是一个相当丰富的导航功能插件,允许你创建HTML的大型菜单。

Cut & Paste jQuery Mega Menu

兆丰菜单指下拉菜单,其中包含多个列的链接。 这个jQuery脚本可以让你添加一个超级菜单,任何网页上的链接锚,每个菜单显示采用圆滑扩大动画。自定义动画菜单延迟时间消失之前,加当鼠标推出了锚。

Mega Drop Down Menu w/ CSS & jQuery

在本教程中,作者演示了如何创建一个菜单系统,这适合于大型电子商务网站。

Sexy Drop Down Menu w/ jQuery & CSS

研究表明,当用户第一次访问一个网站时,顶部导航往往最大程度的影响着他们的视觉。在本教程中,您将学习如何创建一个柔和下落的并且非常性感的下拉菜单。

Superfish – jQuery menu plugin

Animated Menus Using jQuery

在本教程中,您将学习如何创建这个惊人的动画效果菜单,这正是普通的XHTML,CSS和JavaScript。

Create a Cool Animated Navigation with CSS and jQuery

在本教程中,您是要学习只使用CSS和jQuery建立一个非常酷的动画导航菜单。

jQuery Simple Drop Down Menu

这是一个很小导航脚本,压缩到只有1kb大小,20行代码。您可以用HTML无序列表创建主菜单结构,这是一个很好的做法。

Simple jQuery Dropdowns

这是一个低保样式的导航代码,非常精简。但是它仍然具有通常所需要的所有功能。

Smooth Navigational Menu

这个菜单的内容可以是达成无论从网页上直接标记,或外部文件,并通过Ajax的牵强。对于jQuery可配置,时尚“幻灯片加淡出”,由于是过渡期间适用的分菜单揭幕。菜单同时支持横向和纵向(侧栏)的方向。

jQuery的多级CSS菜单

这是一个多级水平CSS菜单,利用规则嵌套的HTML列表标签创建。当子菜单靠近窗体右边缘时,将自动调整展示方面。

A Perfect Multi-Level Navigation Bar

Simple unlimited levels vertical drop down navigation menu jquery plugin

jdMenu Hierarchical Menu

该jdMenu插件为jQuery的菜单提供了对Web应用程序的网站的简洁的层次下降,创建简洁优雅的解决方案。功能列表可以查看jdMenu是否是你的解决方案。

会翻转的网站菜单

这是一个会翻转的网站菜单。你把鼠标放到某个菜单项上,它会翻动一下,改变背景色。

jQuery Basic Menu

这是一个下拉菜单,就像应用程序菜单的行为(点击打开,单击关闭...).它支持通过HTML标记或通过JavaScript菜单的创建。

jQuery iPod-style Drilldown Menu

这是一个极好的菜单系统,可用于创建简单的下拉菜单,iPod-like菜单和Flyout风格的导航菜单。

列表导航菜单

这是一个用于创建按字母顺序分类导航的jQuery插件。这个jQuery插件提供一个简单的方法悄悄地添加一个字母为基础的导航部件UL或任何其他职等的清单。一个容易样式化(通过CSS)的导航栏上方出现列表,显示用户的字母A -到- Z的。 点击一个字母的过滤列表,只显示列表中的项目以该字母开头。在一个信(可选)悬停显示计数以上的信件,显示有多少项目将被显示,如果该信被点击。其他选项可以实现您对基本功能的控制。

Lava Lamp for jQuery lovers!

一些必看的jQuery导航插件和教程的更多相关文章

  1. jQuery导航插件One-Page-Nav演示-显示命名锚记

    jQuery导航插件One-Page-Nav演示-显示命名锚记 简介 使用 选项 示例 推荐 简介 电商网站的分类比较明确,比如1楼是手机通讯产品,2楼是家用电器,3楼是服装鞋包等等,旁边还会有一个固 ...

  2. 20个jQuery分页插件和教程

    1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页.键盘和滚动浏览,延迟显示以及完全可定制的导航面板. Read More Demo 2. ...

  3. 新手必看的jQuery优化笔记十则

    jQuery优化 1.简介 jQuery正在成为Web开发人员首选的JavaScript库,作为Web开发者,除了要了解语言和框架的应用技巧外,如何提升语言本身的性能也是开发人员应该思考的问题.文章就 ...

  4. 必看的 jQuery性能优化的38个建议

    一.注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); ...

  5. 【程序】必看干货:Photon多人游戏开发教程

    PUN介绍 http://vibrantlink.com/ 入门 Photon Unity Networking(首字母缩写PUN)是一个Unity多人游戏插件包.它提供了身份验证选项.匹配,以及快速 ...

  6. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  7. 让网站动起来!12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  8. 10款最新CSS3/jQuery菜单导航插件

    这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...

  9. jquery单页网站导航插件One Page Nav

    这是一个轻量级的jQuery的单页网站导航插件.增加了单击后平滑滚动导航和当你浏览不同的部分时自动选择正确的导航项. changeHash: false, 改变当用户单击导航,就改变changeHas ...

随机推荐

  1. MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】(八) ASP.NET MVC 图片上传到服务器

    MVC图片上传.浏览.删除   1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...

  2. PO_标准采购流程请购采购接受入库(流程)

    2014-06-03 Created By BaoXinjian

  3. OAF_OAF控件系列9 - Description Flexfiled描述性弹性域的实现(案例)

    2014-06-17 Created By BaoXinjian

  4. Python 元组 index() 方法

    描述 Python 元组 index() 方法用于从元祖中找出某个对象第一个匹配项的索引位置,如果这个对象不在元祖中会报一个异常. 语法 index() 方法语法: T.index(obj[,star ...

  5. Python hypot() 函数

    描述 hypot() 返回欧几里德范数 sqrt(x*x + y*y). 语法 以下是 hypot() 方法的语法: import math math.hypot(x, y) 注意:hypot()是不 ...

  6. EC20 minipcie版4g模块开发笔记

    插在电脑上实验时若出现 AT+CREG? +CREG: 0,2 可能是usb口供电不足所致,换至主机箱后面usb口后问题解决,返回值+CREG: 0,1

  7. java各种数据类型之间的转换

    1如何将字串 String 转换成整数 int?   A. 有两个方法:   1). int i = Integer.parseInt([String]); 或 i = Integer.parseIn ...

  8. CSS2中的伪类与伪元素

    CSS 伪类用于向某些选择器添加特殊的效果. 我们最常见的就是有超链接的时候,向下面这样 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: ...

  9. 分享八:特殊的mysql函数

    一:MYSQL自定义排序函数FIELD() MySQL可以通过field()函数自定义排序,格式:field(value,str1,str2,str3,str4),value与str1.str2.st ...

  10. Spring Cloud 通过代码自定义配置Ribbon

    我们还是先从官网文档开始学习,如下图所示,我们可以搞一个测试配置类,来验证是否真的可以通过代码来自定义配置Ribbon,但文档明确给出了警告:即这个测试配置类不能放在@ComponentScan所扫描 ...