一些必看的jQuery导航插件和教程

导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容。这里最大的部分是开发一个菜单,即要直观易用,又要符合你网站的设计风格。本文列举了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导航插件和教程,布布扣,bubuko.com

时间: 2024-08-26 05:57:38

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

小生总结:新手必看的jQuery参考手册主要API

本文整理了一些主要的jQuery API,其中包括jQuery 核心函数和方法.jQuery属性参考手册.jQuery CSS操作.jQuery选择器.jQuery文档操作.jQuery筛选操作.jQuery事件方法.jQuery效果.jQuery Ajax操作.jQuery工具函数.jQuery事件对象.jQuery延迟对象.jQuery回调函数,欢迎收藏使用. jquery核心函数 函数                                 描述 jQuery()    这个函数接

必看的 jQuery性能优化的38个建议 (转)

一.注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的 二.请使用一个var来定义变量 如果你使用多个变量的话,请如下方式定义: .代码如下: varpage = 0,    $loading = $('#loading'),    $body = $('body'); 不要给每

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

jQuery优化 1.简介 jQuery正在成为Web开发人员首选的JavaScript库,作为Web开发者,除了要了解语言和框架的应用技巧外,如何提升语言本身的性能也是开发人员应该思考的问题.文章就以jQuery为例,为大家提供了10个有效提升jQuery性能的小技巧. 2. 合并.最小化脚本 大部分浏览器都不能同时处理多个脚本文件,所以它们都是排队加载——加载时间也相应地延长了.考虑到你网站的每个页面都会加载这些脚本,你应该考虑把它们放到单个文件中,然后利用压缩工具(比如Dean Edwar

必看的vi 的基本使用教程

vi,Unix&Linux下最基本的编辑器,功能强大使用简单,是用户的必备利器. 模式: 命令模式(默认,通过命令对文件内容进行编辑) vi //在当前目录创建空文件 vi filename //打开指定文件 vi -o|O f1 f2 //打开多个文件,o|O表示水平|垂直分隔 通过vi打开文件后自动进入命令模式,此模式下所有输入都是命令 插入模式(像windows中的普通编辑器一样使用) 命令模式下按iaoIAO任一键进入插入模式,esc回到命令模式 i在光标前插入文本 I在光标所在行前插入

ASIO插件 真的能提升 音质?(听音乐者必看)

最近在倒弄HIFI音乐播放器footbar2000的配置时,发现了2011年的一个神贴, 最牛逼的是,这个神贴到现在还屹立不倒,还有很多无知的人在下面膜拜, 我真的想问:你这么优秀,都能逆天反转音质,你妈知道吗. 首先,我们再来看一看这个神贴: foobar2000使用ASIO插件.驱动大幅提升音质图文教程 http://www.pt80.net/thread-283285-1-1.html. 从帖子 上看,其实作者就干了两件事: 1.使用了ASIO输出插件改变音频采样率,设定为48kHZ. 2

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

这是一个轻量级的jQuery的单页网站导航插件.增加了单击后平滑滚动导航和当你浏览不同的部分时自动选择正确的导航项. changeHash: false, 改变当用户单击导航,就改变changeHash选项为true. scrollSpeed: 750, scrollThreshold: 0.5, filter: '', easing: 'swing', begin: function() { //I get fired when the animation is starting }, end

jQuery网站侧边隐藏展开导航插件一(转)

html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery网站侧边隐藏展开导航插件 - 站长素材</title> <link rel

jQuery.TreeView插件实现树状导航(十三)

一:jQuery.TreeView插件简介 该插件的特点: 1.支持静态的树,即一次性将全部数据加载到客户端. 2.支持异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据. 3.支持节点级联. 4.能够承载大数据量,并性能表现优异. 5.支持主流浏览器. 6.使用方便官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ 二:jQuery.TreeView插件使用 Step 1:添加相关css及js的引用 <l

jQuery图片插件自动轮播原理解析

经常看到项目要用到图片轮播效果,一般的操作流程都是先到网上找一个好看的JQuery图片轮播插件,然后看下demo,再配下参数.好了,关机下班回家 其余的就交给插件吧. 是不是感觉有了jQuery,世界变得那么美好呢. 本人最近用的一个插件是 jquery.carousel.js,官方网站是:http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin 下面,我们来讨论一下图片轮播原理. 首先来个简单的demo 效果图如下: 这是个导