36个经典的JQuery导航菜单演示+下载

现在很多网站或博客上都流行使用JQuery菜单样式,这种样式看起来很非常好看,导航效果比纯文字或图片效果要好的多,下面是从网上搜集整理的36个经典的JQuery导航菜单。

1.jQuery 选项卡界面 / 选项卡结构菜单教程

这种类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此演示哟,你一定会喜欢上它的。

jquery-tabbed-interface

Preview || Download

2.效果生动逼真的jQuery菜单

学习如何使用简易的XHTML/CSS/JS创建令人惊奇的效果生动逼真的菜单,类似 Dragon Interactive (dragoninteractive.com).

jquery-animated-menu

Preview || Download

3. 使用CSS和jQuery创建非常Cool的动画效果导航 (教程 + 下载)

动画及视觉反馈是帮助用户在浏览和网站与网站互动的有效手段。虽然传统的Adobe的Flash是可以完成各种动画效果的,但是最近使用JavaScript的魔法,我们可以完全避免使用flash。

jquery-navigation-slide

Preview || Download

4.jQuery目录导航插件

这个插 件为我们提供了添加基于字母顺序的导航小部件到有序和无序列表的方法。一个在列表之上的简易的(via CSS)导航条,向用户展示从A到Z的检索。通过从列表中选择一个字母来显示以此字母开头的所有元素。在可选字母上面显示的计数,是表明当你点击此字母的 时候会有多少项目被现实。除此之外还有其他的基本功能可供选择。

jquery-list-nav

Preview || Download

5. jqDock 菜单

变换图标模仿mac的Dock菜单, 水平或者垂直,以图标扩大过渡可选的标签。

jqdock-jquery-plugin-menu

Preview || Download

6.Jquery滑动菜单

这篇教程是像我们讲解与下载滑动菜单,你可以在PSDtuts网页右上角查看效果。

jquery-sliding-menu-tutplus

This is how looks finished demo version:

vertical-sliding-menu

Preview || Download

7.CSS 精灵 2 – 是JavaScript的时间

css-sprites-2-jquery

Preview

8. CSS Mac Dock 菜单

如果你是Mac深度中毒者,你会爱上我设计的这个CSS dock菜单。他使用了 Javascript库和Fisheye部件界面以及我的一些图标。它有两种停靠风格-上端与下端。这个菜单加入到我的ITHEME中非常好。

css-dock-menu-jquery

Preview || Download

9.jQuery的Kwicks菜单

Kwicks起源于Mootools中的一个效果(相同名字),逐渐演变成一个高度可定制的通用部件.

kwicks-jquery-menu-navigation

7 Examples || Download

10.Jquery文件树

文件树是一个可配置的, AJAX的文件浏览器插件 。您可以只用一行JavaScript代码创建一个定制的,完全互动的文件树。目前,服务器端连接器的脚本支持PHP, ASP, ASP.NET, JSP, 与Lasso。如果您是开发人员,可以轻松地使用所选语言创建自己的连接。

jquery-file-tree-navigation

Preview || Download

11.学习jQuery: 褪色菜单 -更换内容

CSS-tricks上很好的教程,讲解如何使用css和, 这次是他们教导如何使用 使得菜单选项褪色。

menu-fader-jquery-navigation

Preview || Download

12. 如何使用jQuery创建顺滑生动的菜单

曾经见过一些优秀的导航,你有想自己创建一个的冲动么? 这篇教程是教你怎样建立拥有顺畅动画效果的菜单。

smooth-animated-jquery-menu

Preview || Download

13.Create Vimeo-like top navigation

学习如何创建像 Vimeo网站的导航菜单 ,虽然只用了xhtml,css used,但是我仍然想包含他。

create-vimeo-like-top-navigation

Preview + Vimeo site || Download

14. jQuery (mb)菜单 2.3

这是一个强大的 部件,轻松创建更加直观的多级树形菜单或者继承菜单 (右击)!

你可以添加许多子菜单;如果子菜单或者菜单在页面中没有声明,组件会通过AJAX通过调取菜单中的模板页ID来获取。你需要的(菜单属性值)ajax页面会返回并作为下面的菜单实例而格式化代码。

jquery-mb-menu-navigation

Preview || Download

15. Coda 滑动菜单

coda-slider-jquery

Preview || Download

16. jQuery idTabs

idTabs是的插件。他能非常容易的为网站添加选项卡. 但是他也为无穷的可能性敞开大门。

idtabs-jquery-navigation

Preview || Download

17. 使用CSS & jQuery创建顺畅的选显卡内容区

网页设计师设法把大量的信息浓缩在一个网页上而不失可用性是最大的挑战之一。内容选项卡化是处理此类问题非常棒的方法,最近广泛被应用于博客。这是一篇非常棒的教程讲解,使用HTML建立一个小的选项卡信息盒,最后使用一些简单js功能与库实现。

slick-tabbed-content-area-css-jquery

Preview

18. 为jQuery爱好者准备的熔岩灯!

轻量级Lavalamp菜单通过令人惊奇的 javascript 库封装成的插件.

lava-lamp-jquery-navigation

Preview || Download

19. jQuery下拉动画菜单

下拉菜单是一个非常便利的范式,使大菜单浓缩在小的初始空间内。很长一段时间人们只是使用一种形式的标准下拉模式,但是只需小小的努力你就可以使用 和 CSS创建雨刷效果的菜单。

animated-dropdown-menu-jquery

Preview || Download

20. 运用jQuery使背景图片生动起来

五种不同的方式,如何使用创建生动的背景图片真实效果

jquery-background-image-animations

Preview

21. 怎样使用jQuery创建‘Mootools 主页’有创造性的导航效果

正如你说知道的那样,现在有许多的相互竞争的javascript库 ,虽然我喜欢, 但是我过去总喜欢运行在MooTools 上的菜单。因此,在本指南中,我们将要使用创建相同效果的菜单!

mootools-homepage-navigation-effect

Preview || Download

22. Menumatic Mootools

MenuMatic是MooTools 1.2中使用语义列表或无序列表链接变成动态下拉菜单系统的类。For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.( 不知如何翻译是好,>.< )

menumatic-vertical-menu-jquery

Preview Vertical || Preview horizontal || Download

23. jQuery convertion: 使用Javascript的车库门效果

所有的粉丝们: 这里是使用的车库门效果!

garage-door-jquery-menu

Preview || Download

24. Perspective tabs

Perspective tabs是一个非常简单的 mootools 1.2 插件,可以在小空间内插入大量的选项卡。

perspective-tabs-mootools-menu

25. Fisheye 菜单

Fisheye菜单是基于MacOSX文档可展开的菜单。

fisheye-menu-jquery

Download

26. JavaScript滑动菜单 高亮 1kb

这滑动悬停效果脚本是为你的导航菜单添加一些风味的简单方法。使用CSS你可以方便的自定义菜单来满足你的“外观与感觉”要求。 脚本非常的简单,如下.

sliding-javascript-menu-highlight

Download

27. Mootools Demo Redux

简单的可展开的Javascript导航菜单

mootools-demo-redux

Preview

28. HoverAccordion

no-click二级菜单插件 (你可以用它他做任何你想做的).

hover-accordion-jquery

29. 简单的Javascript手风琴菜单

Javascript手风琴菜单在如今的网页设计师世界广为使用。我们看到有很多的这样的脚本。这是其中一个非常小的极其简单容易使用的手风琴菜单脚本。不需要任何的框架并跨浏览器兼容。

simple-javascript-accordion-jquery

Preview || Download

30. UvumiTools 下拉菜单

UvumiTools下拉菜单是非常简单的多级菜单,由HTML无序列表构造而成,使用 Mootools Javascript 框架,通过简单的 <ul> HTML 元素进行编辑.

uvumi-tools-dropdown-menu

31. 使用CSS和jQuery创建多级下拉菜单

multilevel-dropdown-menu-jquery

Preview || Download

32. jQuery & CSS 实例 – 下拉菜单

下拉菜单与菜单条在早期的图形用户界面已经被大量使用。他们的使用变得无处不在,甚至预期,桌面应用程序,以及在网上迅速跟进。本文旨在描述最基本的,但是最强的技术,为您的应用程序或者网站的用户界面设计添加下拉菜单。

jquery-css-example-dropdown-menu

Preview

33. 浮动的菜单jQuery&CSS

对我们所有的人来说,为了使用菜单,处理长的页面需要滚动到页面的顶端,这有一个不错的选择,浮动的菜单帮随着页面的滚动。 HTML, CSS 与 , 完全遵守W3C。

live-floating-menu-jquery

Preview || Download

34. Superfish – jQuery菜单插件

Superfish是Suckerfish-style 菜单的加强型 插件。现在有纯CSS下拉菜单(所以没有js降低优雅性) 并增加了以下非常抢手的改进:

superfish-examples-jquery

Preview || Download

35. JQuery Pager

一个简单的插件,为数据驱动的Web应用程序提供分页功能界面。

jquery-pager-menu

Preview || Download

36. jQuery feed 菜单

当feeds变得流行,在你的网站上它有一个为读者指向的RSS或者Atom feeds图标。做为feeds,在国外博客与网站中更为普遍。存在多个供稿的比比皆是,这里是 feed 菜单解决方案!

jquery-feed-menus

Download

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 2014.03.27

    优秀的 HTML 和 CSS 代码规范

    HTML 语法 用两个空格来代替制表符(ta…

  2. 没有图片

    2010.09.20

    Discuz! X1.5正式版发布

    康盛旗下产品Discuz! X1.5 正式版…

  3. 没有图片

    2011.04.21

    TwentyTen Advanced Headers:为日志分类添加自定义header图片

    WordPress默认主题TwentyTen…

  4. 没有图片

    2012.12.03

    网络自由与政治对决:谷歌反对联合国管理互联网

    谷歌中国的首页底部发布了一个名为“采取行动”…

  5. 2012.02.05

    2012新主题:Cimple V1.0正式发布

    你没进错地方,你现在看到的确实还是我的博客,…

  6. 没有图片

    2010.11.24

    PHP页面之间传递参数简单体验(完整实例)

    菠萝从来没学过PHP,虽然天天在和PHP打交…

评论

  1. 菠萝 2010.03.25 9:20下午

    @angpang
    有用就好!

  2. angpang 2010.01.05 4:25下午

    很好,

  3. 菠萝 2009.09.21 7:03上午

    都出错?
    知道了,链接代码出了问题,马上更正!
    谢谢提出!

  4. Mr.sam 2009.09.21 6:30上午

    检查一下链接!好像都出错的。

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!