来源: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. char型指针和字符串字面量和字符数组

    1.当一个char型指针指向一个字符串字面量(也就是常量字符串)时,该指针必须由const修饰,否则,系统会给出deprecated(不赞成)的警告.原因是:字符串字面量不可改变,当它被一个非cons ...

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

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

  3. [100]find&xargs命令

    打算把基础命令常用选项做个总结. find命令参数 - 命令格式 find . -type f -name '*.txt' - 命令参数 find #查找文件 -type #指定类型 f 文件 d 目 ...

  4. git将本地项目添加到github上

    git init git add . git commit -m '添加备注' git add remote origin originUrl git push -u origin master 注意 ...

  5. lua -- io.pathinfo

    io.pathinfo 拆分一个路径字符串,返回组成路径的各个部分. 格式: parts = io.pathinfo(路径) 使用示例: local pathinfo = io.pathinfo(&q ...

  6. 阿里云流计算BLINK

    https://help.aliyun.com/product/45029.html?spm=a2c4g.11186623.3.1.sSHCfr https://yq.aliyun.com/tags/ ...

  7. 设置Sysctl.conf用以提高Linux的性能(最完整的sysctl.conf优化方案)

    Sysctl是一个允许您改变正在运行中的Linux系统的接口.它包含一些 TCP/IP 堆栈和虚拟内存系统的高级选项, 这可以让有经验的管理员提高引人注目的系统性能.用sysctl可以读取设置超过五百 ...

  8. MyBatis 问题列表

    问题表现:The content of elements must consist of well-formed character data or markup 解决办法:1.配置的动态SQL语句里 ...

  9. 【转】Unity3D的LightProbe动态光探头用法介绍

    原创至上,移步请戳:Unity3D的LightProbe动态光探头用法介绍 之前曾经介绍过Unity3D的LightMapping烘焙的用法.单独使用的LightMapping效果很好,但由于只是把光 ...

  10. hive sequencefile导入文件遇到FAILED: SemanticException Unable to load data to destination table. Error: The file that you are trying to load does not match the file format of the destination table.错误

    hive sequencefile导入文件遇到FAILED: SemanticException Unable to load data to destination table. Error: Th ...