资讯频道 → Web前端
阅读更多

38顶
2踩

Web前端

转载新闻 20个优秀JavaScript 导航技巧与实例

2009-05-13 10:55 by 副主编 zly06 评论(10) 有26412人浏览
JavaScript

JavaScript允许你在网页中添加交互和反馈，使得用户体验更棒也更直观。

在这篇文章中，你将发现一些非常棒的、独特的JavaScript导航技巧和实例。

小贴士：如果图片是单独在一个页面上而没有“查看演示页面”的提示，点击每张图片将直接跳转到导航菜单技巧的演示页面。而点击该技巧的名称则将跳转到其开发项目组网页上。

1. MenuMatic

这个实例包含根据首字母排序或者乱序的链接菜单，并且可以将其转变成动态下拉菜单，可以使垂向的，也可以是横向的。

menumatic

查看演示页面

 

2. 使用jQuery的Animated Menu

这是一个当用户鼠标停留其上会显示动态菜单的技巧。源文件包括PSD（PSD是Adobe Photoshop的文件格式）提供下载。

Animated Menu using jQuery

查看演示页面

3. 使用jQuery的车库门效果

Gaya Kessler呈现了一个奇特的JavaScript菜单，它利用jQuery模拟了真实的车库门的效果。

Garagedoor Effect using jQuery

查看演示页面

4. JGlide滑动菜单

一个漂浮在页面上的独特的菜单。用户可以拖动它到任何一个想要的地方。

JGlide Menu

查看演示页面

5. 垂向滑动jQuery菜单

HVDesigns呈现一个下拉菜单，下拉菜单能显示更多链接。

Sliding jQuery Menu

查看演示页面

6. 透视效果标签

你可以使用这个技术产生带动画效果的滚动标签条。

Perspective Tabs

查看演示页面

7. 垂向类Digg菜单

Antonio Lupetti presents a Digg-like menu that uses simple JavaScript.Antonio Lupetti使用简单的JavaScript展示一个类似Digg的菜单。

Vertical Digg-like Menu

8. 火焰灯

当你把鼠标停留在一个选项上，你将看到使用jQuery的CSS滑动门效果产生。另一个代替版本Mootols在这里可访问。

LavaLamp

9. 鱼眼菜单

如果你是一个超级Mac dock迷，那么你会喜欢这个菜单。

Fisheye Menu

10. 简单JavaScript手风琴效果菜单

一个很好的复合手风琴状菜单。

Simple JavaScript Accordions

查看演示页面

11. 滑动高亮显示JavaScript菜单

这个滑动悬停效果脚本用来高亮显示菜单选项是一个很简单的技术。

Sliding JavaScript Menu Highlight

12. 淡入淡出菜单-更改内容

这个技巧允许你淡入淡出菜单项目。

Fading Menu - Replacing Content

查看演示页面

13. 简单多级下拉菜单

一个简单的JavaScript下拉菜单。

Simple Multi-level Drop-Down Menu

14. 使用jQuery做背景图片的动画效果

一个使用jQuery和CSS背景位移属性创建动态菜单的技巧。

Using jQuery for Background Image Animations

查看演示页面

15. Mootools Redux

一个使用MooTools实现当你把鼠标放在选项上时链接字体变大的菜单。

Mootools Redux

查看演示页面

16. 悬停手风琴/侧边菜单

这是一个可以用来做垂向侧边菜单的手风琴插件。

Using jQuery for Background Image Animations

17. UvumiTools下拉菜单

另一个基于MooTools、拥有更多特色的JavaScript菜单。

UvumiTools Dropdown Menu

18. jQuery UI 标签

使用这款标签实例轻松分开内容。

jQuery UI Tabs

查看演示页面

19. Proto菜单：右键菜单

一个在Prototype框架上编写的用户可自定义右键菜单。

Proto.Menu: Right Click Menu

20. 可扩展压缩菜单

这个菜单实例允许你拥有两级导航。当你在主列表单击，次级列表会展开。

Accessible Expanding and Collapsing menu

查看演示页面

那你呢，你在使用什么？

 

关于作者

Kawasar Ali 是一位网页设计者，美术设计者，并且希望成为美国纽约的摄影师。他同时是Desizntech的创建者，Desizntech是一个查找关于网页设计、苹果Mac、PC以及其他问题的帮助的网站。如果你希望联系他，你可以在他的Twitter上或在他的个人网站上留言。

 

来自: elanso
38
顶
2
踩
评论 共 10 条 请登录后发表评论
10 楼 李君寻 2011-09-07 22:26
我在学校学习项目组中的做前台设计,有了这位设计师的20个优秀JavaScript 导航实例,以后做页面的效果会提升不少.十分支持作者,希望我以后也可以为大家提供一些好的实例
9 楼 yi_17328214 2009-12-21 09:32
   
8 楼 yangkai 2009-11-13 17:34
very good,can you send it to me!Thanks in advance!
7 楼 kjava 2009-05-14 17:28
很棒！好的界面来自于美术设计，啥时候能让程序员也能自己随手弄出来不错的界面。
6 楼 irobot 2009-05-14 16:00
 
5 楼 caiceclb 2009-05-14 10:54
越来越多不是新闻的新闻...
4 楼 thebye85 2009-05-14 10:23
第一个不错
3 楼 jackhe 2009-05-14 09:35
太多太多  让我迷惑
2 楼 whaosoft 2009-05-14 01:31
哪能下载啊
1 楼 flyfan 2009-05-14 00:47
好东西要收藏

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 使用MSSOAPT查看.NET Web Service的SOAP信息

    前几天在网上找了一圈怎样利用MS SOAP Toolkit中提供的Trace Utility来截取.NET下开发的Web Service的SOAP 消息，刚开始尽管端口都配置对了，但怎么都截取不到，后来终于忘了在哪里看到一眼，需要点小配置才能实现截取。现在说一下：1- 首先将MSSoapT的端口都配置好：Local port：9000 （也就是让MSSoapT监听本地9000端口，然后我们

  • Microsoft SOAP Toolkit Version 2.0 FAQ

    Microsoft SOAP Toolkit Version 2.0 FAQTranslate By ZeeMicrosoft CorporationAugust 2001Summary: This article provides in-depth answers to frequently asked development questions regarding Microsoft SOAP

  • Smartphone 2002中使用Web Service

    Smartphone 2002中使用Web Service<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /> Chung Webster Microsoft UK, Developer Services January 2003 Applies to:Microsoft S...

  • [收藏]Web Service故障处理[Matt Powell&Scott Seely]

    <iframe align="center" marginwidth="0" marginheight="0" src="http://www.zealware.com/csdnblog336280.html" frameborder="0" width="336" scrolling="no" height="280">

  • 20个优秀JavaScript 导航技巧与实例(太好了，收藏！)

    20个优秀JavaScript 导航技巧与实例 JavaScript允许你在网页中添加交互和反馈，使得用户体验更棒也更直观。在这篇文章中，你将发现一些非常棒的、独特的JavaScript导航技巧和实例。1. MenuMatic 这个实例包含根据首...

  • 20个优秀的Javascript导航菜单实现技巧及实例

    这里推 荐20个优秀的Javascript导航技术及实例(20 Excellent JavaScript Navigation Techniques and Examples)，了解如何使用Javascript制作交互性强体验好的导航菜单，并深入了解各种导航的实现原

  • 20个优秀JavaScript导航菜单

    <br />JavaScript允许你在... 在这篇文章中，你将发现一些非常棒的、独特的JavaScript导航技巧和实例。点击图片直接跳转到导航菜单演示页面，点击该菜单名称则跳转到其开发项目组网页上。 1. MenuMati

  • [Ajax]十个优秀的 Ajax/Javascript实例网站

    AjaxRain有很多完美整合AJAX, CSS, DHTML 或 Javascript的实例，有一些Demo的确值得你去看一看，即使你不是网页设计(开发)师。 2.Ajax Daddy    Ajax Daddy收集了大量漂亮的Web2.0工具，其中一个使用的功能就是...

  • 精选30个优秀的CSS技术和实例

    精选30个优秀的CSS技术和实例 投递人墙头草发布于 2008-12-06 20:57评论(97)有17487人阅读原文链接[收藏]«» 今天，我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例，您将在这里发现很多...

  • 应用WSDK －附录如何使用SOAP Trace Utility进行调试

    应用WSDK －附录如何使用SOAP Trace Utility进行调试  小气的神2002-12-05 Article Type: Overview  难度等级：3/9        版本：1.20 这个附录是用来说明，我们在Web Services应用开发过程中，如何查看Web Services Client和Web Services Server端

  • 十个优秀的Ajax/Javascript实例网站

    今天，要向大家推荐10个相当棒的Ajax和Javascript国外资源网站或博客，它们提供了相当多的高质量Ajax、Javascript实例及教程，喜欢Ajax和Javascript的朋友绝对不能错过。 1.Ajax Rain    AjaxRain有很多完美...

  • Windows Embedded CE 6.0开发初体验(二)CE开发环境

    上一篇《Windows Embedded CE 6.0开发初体验》之“嵌入式开发流程”：http://blog.csdn.net/aawolf/archive/2007/10/10/1818866.aspxCE开发环境下面就要让今天的主角闪亮登场了——Digi CC 9P开发板。为了感谢Digi提供的开发板，还是给他们做个广告吧：这是一家以WiFi相关产品为主营业务的公司，也生

  • XPe开发初体验（一）XPe概述

    XP Embedded是微软Windows Embedded产品线中非常重要的一环，不过比起大名鼎鼎的Windows Embedded CE，XPe显得过于低调了。在接下来的一段时间里，我希望能够用六篇的篇幅来描述一下XPe的整个开发过程。这个系列文章主要是针对有Windows编程经验，但是没有嵌入式开发经验的开发者，提供一些概念和开发过程的初步介绍。XP Embedded是一个基于Windo

  • Windows Embedded CE 6.0开发初体验（一）Windows CE概述

    这篇文章的目的并不是介绍Windows Embedded CE开发的方方面面，只是用一个初涉嵌入式领域的软件开发者的视角来介绍Windows CE开发中最常用的概念和知识，解决大家会在实际开发中碰到的一些小问题，让大家了解嵌入式开发与应用程序开发，到底有哪些不同。Windows CE概述从6.0版本开始，Windows CE的名字改为Windows Embedded CE，当然这也是为了结

  • Windows Embedded Standard开发初体验(一)

    Windows Embedded Standard，微软又创造了一个新名词。与此同时，XP Embedded，成为了一个历史名词。微软在年初推出了新的Windows Embedded产品线命名规则：Windows CE改名为Windows Embedded Compact，而XP Embedded改名为Windows Embedded Standard，WEPOS改名为Windows Embedd

  • Shared Source Microsoft Device Emulator初体验

    Shared Source Microsoft Device Emulator初体验微软最近发布了Device Emulator 1.0的源代码，我也乘机下了一个，准备研究一下。首先提醒大家的是，模拟器的源代码是Shared Source，而不是Open Source，大家一定看清楚license，以免将来有不必要的麻烦。Device Emulator的代码直接可以在微软网站上找到，是一个zip压

  • Windows Mobile开发资源介绍

     目前Windows Mobile的开发资源已经非常多了，我们在这里试着对这些资源进行一个归纳，使第一次进入Windows Mobile领域的开发者能够更容易得找到有用的开发资源。Windows Mobile是什么Windows Mobile是微软为智能手机和PDA提供的操作系统，在Windows Mobile 5.0之前分为Pocket PC和Smartphone两种版本，Pocke

  • 灾难环境下的Mobile应用构建及部署

     灾难环境下的Mobile应用构建及部署写下这个题目绝对不是为了哗众取宠。看题目大家都会知道这篇文章的源头在哪里，的确地震之后，我一直有一种无力感。IT系统无法快速切换到灾难状态，于是，很多的信息管理又再次回到笔和纸的时代。但是，信息管理系统在灾难中其实更为重要，比如救灾物资的跟踪、发放，遇难人员身份确认和统计，GPS导航等等。尤其是我们的Mobile移动终端设备，其实能够发挥比平时更大的

Global site tag (gtag.js) - Google Analytics