来源:http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html翻译:http://parandroid.com下面为你准备了13个利用Javascript实现的网页导航菜单

1) Sexy Sliding Menu- 基于mootools的Javascript网页导航菜单,漂亮的滑动门技术,看到下面的图了没有,用它来设计你的Sidebar,非常之炫,Sexy,是的。

Demo: Mootols Version
Demo: Script.aculo.usVersion

2) FastFind Menu Script-这个脚本基本动态的Ajax技术,可以让你创建多级嵌套的菜单。

Demo: FastFind Menu

3) Webber 2.0 Dock Menu-一个典型的Dock类型网页导航菜单。

Demo: Webber 2.0 Dock Menu

4) Phatfusion- Image Menu-这这是一个使用Javascript的图片导航菜单,它最大的特点是除了悬浮展开图片链接之外,还保持当前选定的菜单链接状态。

Demo: Phatfusion- Image Menu
Demo: Mootools version with XML parser

5) Drag and Drop ordering in a TreePanel-这个好像是从著名的Ext JS提取的,一个树型导航菜单,灵感当然是来源于Windows的资源管理器,我相信是这样的。

Demo: Drag and Drop ordering in a TreePanel

6) Custom Menu Events

在同一时间内显示展示菜单的介绍和其它相关信息,其动态效果甚至达到Flash。不过缺点是需要再次刷新才能进行导航菜单的动态显示。

Demo: Custom Menu Events | ThinkVitamin.com

7) Context Menu Functionality一个简洁轻巧的上下文本导航菜单,利于在用户浏览时达到一个良好的交互作用。

Demo: Context Menu Functionality

这是另一个DemoAnother Context Menu

8 ) LavaLamp jQuery Sliding Menu一个基于jquery的滑动菜单效果,体积比较小巧。另一个版本是来自Guillermo Rauch基于mootools所构建的。

Demo: LavaLamp jQuery Sliding Menu
Demo: Mootools Fancy Menu

9 ) Slashdot Menu- Dynamic Drive这是一个流行的滑动/折叠导航菜单,是设计爱好者从著名网站Slashdot中提取的。其可控制性非常强,比如你可以设置为只准打前主菜单打开,或者全部打开,或同时收缩所有的子菜单等,且可以根据Cookie判断来显示菜单。

Demo: Slashdot Menu

10 ) Mootools menu with Accordeon and Effects非常整洁的一个导航菜单,当鼠标悬浮的时候,当前链接就会伸展出来并且可以显示一个手风琴效果的二级菜单。

Demo: Mootools menu with Accordeon and Effects

11 ) CSS Dock Menu这又是来自Nick la的Mac风格的鱼眼效果菜单,如果你对这种效果感兴趣,可以看一下我的另一篇文章:
多个Mac风格的鱼眼菜单(Dock Menu)免费下载和教程

Javascript导航菜单13则的更多相关文章

  1. JavaScript实战(带收放动画效果的导航菜单)

    虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! ( 原创文章,转摘请注明:苏福:http://www. ...

  2. 5.JavaScript优化及导航菜单背后的秘密

    JavaScript优化及导航菜单背后的秘密 伍星 学习目标1.进一步了解前端优化 学习如何编写良好的 JavaScirpt2.通过导航的学习,了解JavaScirpt的应用 JavaScript在用 ...

  3. JavaScript(获取或设置html元素的宽,高,坐标),确定和判断鼠标是否在元素内部,二级导航菜单鼠标离开样式问题解决

    设置: document.getElementById('id').style.width=value    document.getElementById('id').style.height=va ...

  4. Jquery列表中的导航菜单的应用

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. 在ASP.NET MVC下实现树形导航菜单

    在需要处理很多分类以及导航的时候,树形导航菜单就比较适合.例如在汽车之家上: 页面主要分两部分,左边是导航菜单,右边显示对应的内容.现在,我们就在ASP.NET MVC 4 下临摹一个,如下: 实现的 ...

  6. php后管理分类导航菜单

    <!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content=&quo ...

  7. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  8. jq倾斜的动画导航菜单

    效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: & ...

  9. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

随机推荐

  1. SQL Server 2008开启sa账户以及如何用JDBC进行连接

    做实验需要用Java与SQL Server连接,因为使用的 SQL 2008 Express Edition 是基于 Visual Studio2010 安装包安装时一起安装的,所以为了方便数据库的操 ...

  2. js获取IP地址多种方法实例教程

    js获取IP地址方法总结   js代码获取IP地址的方法,如何在js中取得客户端的IP地址.原文地址:js获取IP地址的三种方法 http://www.jbxue.com/article/11338. ...

  3. Redis为什么使用单进程单线程方式

    Redis采用的是基于内存的采用的是单进程单线程模型的KV数据库,由C语言编写.官方提供的数据是可以达到100000+的qps.这个数据不比采用单进程多线程的同样基于内存的KV数据库Memcached ...

  4. How do I measure JVM startup time?

    https://stackoverflow.com/questions/39321345/how-do-i-measure-jvm-startup-time PrintCompilation2 htt ...

  5. An introduction to High Availability Architecture

    https://www.getfilecloud.com/blog/an-introduction-to-high-availability-architecture/ An introduction ...

  6. [AWS vs Azure] 云计算里AWS和Azure的探究(1)

    转自:http://www.cnblogs.com/hotcan/archive/2013/01/31/2886794.html 云计算里AWS和Azure的探究(1) 全球领先的云的计算平台主要有两 ...

  7. [Windows Azure] Virtual Machine and Cloud Service Sizes for Windows Azure

    Virtual machine size CPU cores Memory OS disk space–cloud services OS disk space–virtual machines Ma ...

  8. python 三元表达式 if for 构建List 进阶用法

    1.简单的for...[if]...语句 Python中,for...[if]...语句一种简洁的构建List的方法,从for给定的List中选择出满足if条件的元素组成新的List,其中if是可以省 ...

  9. Android MediaPlayer接口及状态迁移

    [时间:2016-09] [状态:Open] [关键词:android,mediaplayer,播放接口,播放状态图] 引言 本文内容相对简单,作为后续处理的起点,简要整理了Android Media ...

  10. jsdoc注释规范工具(使用 JSDoc 3 自动生成 JavaScript API 文档)

    安装和使用规范见:http://moodpo.com/archives/jsdoc3-tutorial.html 实例: /** * 模块调用方法 * * * @param {string} modu ...