来源: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. 36个引人注目JQuery导航菜单

    1.jQuery 选项卡界面 / 选项卡结构菜单教程 这种类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心 ...

  2. animate用法 js原生_用 原生Javascript 创建带动画的固顶导航菜单

    当我们在网页中加入一个导航菜单的时候,需要考虑很多因素.如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性.又或者你想为它添加一些炫酷的动画.这时你可能会对 jQuery 感兴趣,因为它会帮 ...

  3. abp.ajax get,ABP框架中导航菜单的使用及JavaScript API获取菜单的方法

    每一个WEB应用程序都有导航菜单,Abp也为用户提供了通用的创建和显示菜单方式. 创建菜单一个应用程序可能包含不同的模块,而每个模块都可能有它自己的菜单项.在Abp中,需要创建一个派生自Navigat ...

  4. html折叠菜单列子,javascript实例教程(2) 创建折叠式导航菜单_javascript教程

    为了创建折叠式的导航菜单,你可以在网页的最前面部分以下代码: function formHandler() { var URL = document.form.site.options [docume ...

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

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

  6. TAB(Nav)导航菜单

    2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  7. easyui左侧导航菜单右侧载入百度地图项目框架

    代码下载 http://pan.baidu.com/s/1cDht7K 一个左侧是导航菜单,右侧是百度地图的应用: 一 左侧菜单 使用jquery easyui框架:网上下的资源:运行后如下: 二 修 ...

  8. 300+Jquery, CSS, MooTools 和 JS的导航菜单资源

    如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手.本文要为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以应用于自己的网站了. ...

  9. 列表应用(导航菜单)

    (1)功能描述: 在页面表单中,分别展示某类产品的全部子类项,当用户将鼠标移动某子类时,所选子类样式发生变化,并在该子类的右边以浮动的形式展示该类的全部产品:当用户将鼠标移除某子类时,所选子类样式恢复 ...

最新文章

  1. 计算机页面的滚动栏怎么拉长,长滚动网页页面设计技巧
  2. 用C语言实现三子棋游戏(附上思路+项目展示+源代码)
  3. 私有5g网络_欧洲通过FUDGE5G的启动来支持工业4.0的云原生私有5G
  4. Deep Learning(深度学习)学习笔记整理系列之(六)
  5. JSF的web.xml配置
  6. JavaScript从入门到精通之入门篇(一)概念与语法
  7. $python数据分析基础——初识numpy库
  8. java执行程序默认多线程吗_Java多线程 执行程序(1)
  9. Kubernetes NetworkPolicy 工作原理浅析
  10. python最大迭代次数_python scipy eigs:无论收敛容差如何,在最大迭代次数后返回特征向量...
  11. 学到了一个一分不亏的地推妙招
  12. mysql里有sqlfront_使用SQL-Front启动MySQL8.0报错
  13. sql字段合并mysql_sql合并字段
  14. Logisim下载,安装与使用
  15. 几个主要软件调试方法及调试原则
  16. mac转换pin计算机,MAC对应PIN码表-2012.3.4整理
  17. sass 使用入门教程
  18. ant linux版本下载安装,linux下ant的安装
  19. 公众号如何涨粉?做微信seo疯狂涨粉技巧
  20. 代码复杂度分析——时间、空间复杂度

热门文章

  1. 2020年度“中国神经科学重大进展”获奖名单【附成果介绍】
  2. 百度:2020年十大科技趋势
  3. 一文看懂谷歌的AI芯片布局,边缘端TPU将大发神威
  4. 李飞飞公布谷歌云TPU、AutoML、行业方案等多项进展,AI云计算成谷歌全新增长点...
  5. 摊手:工作五年我拿了两次 N+1 赔偿!
  6. redis geohash 学习笔记
  7. 给定一个字符串s,返回去掉子串mi后的字符串。
  8. [译] Swift 中的惰性序列及其原理
  9. js实现复制文本内容到剪切板
  10. J2ee分布式框架--技术介绍文档