Javascript导航菜单13则
来源: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
在同一时间内显示展示菜单的介绍和其它相关信息,其动态效果甚至达到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则的更多相关文章
- JavaScript实战(带收放动画效果的导航菜单)
虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! ( 原创文章,转摘请注明:苏福:http://www. ...
- 5.JavaScript优化及导航菜单背后的秘密
JavaScript优化及导航菜单背后的秘密 伍星 学习目标1.进一步了解前端优化 学习如何编写良好的 JavaScirpt2.通过导航的学习,了解JavaScirpt的应用 JavaScript在用 ...
- JavaScript(获取或设置html元素的宽,高,坐标),确定和判断鼠标是否在元素内部,二级导航菜单鼠标离开样式问题解决
设置: document.getElementById('id').style.width=value document.getElementById('id').style.height=va ...
- Jquery列表中的导航菜单的应用
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 在ASP.NET MVC下实现树形导航菜单
在需要处理很多分类以及导航的时候,树形导航菜单就比较适合.例如在汽车之家上: 页面主要分两部分,左边是导航菜单,右边显示对应的内容.现在,我们就在ASP.NET MVC 4 下临摹一个,如下: 实现的 ...
- php后管理分类导航菜单
<!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content=&quo ...
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- jq倾斜的动画导航菜单
效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: & ...
- jquery和css3实现滑动导航菜单
效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...
随机推荐
- VS2010如何重置开发环境
在利用VS进行软件开发的过程中,我们时不时要因为各种原因,对VS的开发环境进行变动,对于很多初次接触VS这样一个十分好用方便的编程工具的人来说,更改编程环境成了一个难题,今天我们就来讲解一下,如何更改 ...
- ES6模块的import和export用法
ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载 ...
- sqlserver 时间字符串转化为时间格式
),),),),,)) select substring('D:\\files,3,len('D:\\files)-2) --去掉前两位路径D:
- Gitlab日常备份和恢复
按照官方安装文档安装完成之后的/home/git目录结构如下,这里我大致翻译官方的内容,部分加上自己的话,英语功力捉急,请见谅 |-- home | |-- git | |-- .ssh | |-- ...
- 【Linux技术】ubuntu常用命令
查看软件xxx安装内容:dpkg -L xxx查找软件库中的软件:apt-cache search 正则表达式查找软件库中的软件:aptitude search 软件包查找文件属于哪个包:dpkg - ...
- 【Socket】linux组播技术
1.mystery引入 1)本学期学了计算机网络,对一些网络底层的东西还是不大了解 2)目前IP网络流行3种通信模式,分别是单播/广播与组播 3)根据Internet关于IP地址 ...
- Android.mk高级写法
转:http://blog.csdn.net/langresser_king/article/details/8275291 原本只是想记录一些常用的使用技巧,但是越写越得意(>_<),忍 ...
- FIS-PLUS百度前端框架使用过程
1.如果后端开发语言是php,那么前端fis框架用FIS-PLUS,如果是java则用jello 2.FIS-PLUS使用步骤 1.安装nodejs 2.安装 fis npm install -g f ...
- Ubuntu 搜狗输入法崩溃 重启办法
参考:https://www.findhao.net/res/786 打开终端,执行: pidof fcitx | xargs kill fcitx -r 上面两句意思就是kill fcitx的进程再 ...
- 【Turing Award】Robin Milner And Butler W. Lampson
1991 罗宾·米尔纳(Robin Milner) Robin Milner(13 January 1934 – 20 March 2010) Introduction : Milner was bo ...