SuperFish一款基于jQuery的级联下拉菜单
2013-09-01 21:02
453 查看
Superfish的简介:
Superfish是Suckerfish菜单样式的加强版。两者都是基于jQuery,结合现有纯CSS级联下拉菜单,还增加了以下这些网站管理员急需的功能。
1.Superfish样式在IE 6支持悬停(hover属性),增加的默认类为”sfHover”,你也可以改变类名。
2.鼠标移动的延时功能。为了更方便解决鼠标存在问题的朋友,默认延时为800毫秒,你也可以更改延时时间。
3.子菜单以动画显示。显示是是淡入淡出效果。淡入淡出的效果(如速度)也是可以自己设定的。默认为正常(normal)
4.菜单和子菜单可设定为显示或不显示。
5.支持hoverIntent插件,Superfish自动查看是否含有hoverIntent插件,在有hoverIntent插件的情况下执行hoverIntent而忽视淡入淡出效果。如果基于某种原因在你使用superfish时不想使用hoverIntent,将disableHI设置为“ true”。
6.显示是否含有子菜单,可动过菜单添加一张小图片,你也可用通过改变“autoArrows”值来设定是否自动弹出子菜单。
7.阴影效果,仅支持最新浏览器。在IE6下没什么效果。
8.可突出显示当前所在页
Superfish的用法
1.制作一个纯CSS目录
2.将下面内容添加到你的网站
效果请看本网站(原文)上部分导航栏
官方网址:http://users.tpg.com.au/j_birch/plugins/superfish/
原文出处:http://www.biaodianfu.com/superfish-jquery.html
Superfish是Suckerfish菜单样式的加强版。两者都是基于jQuery,结合现有纯CSS级联下拉菜单,还增加了以下这些网站管理员急需的功能。
1.Superfish样式在IE 6支持悬停(hover属性),增加的默认类为”sfHover”,你也可以改变类名。
2.鼠标移动的延时功能。为了更方便解决鼠标存在问题的朋友,默认延时为800毫秒,你也可以更改延时时间。
3.子菜单以动画显示。显示是是淡入淡出效果。淡入淡出的效果(如速度)也是可以自己设定的。默认为正常(normal)
4.菜单和子菜单可设定为显示或不显示。
5.支持hoverIntent插件,Superfish自动查看是否含有hoverIntent插件,在有hoverIntent插件的情况下执行hoverIntent而忽视淡入淡出效果。如果基于某种原因在你使用superfish时不想使用hoverIntent,将disableHI设置为“ true”。
6.显示是否含有子菜单,可动过菜单添加一张小图片,你也可用通过改变“autoArrows”值来设定是否自动弹出子菜单。
7.阴影效果,仅支持最新浏览器。在IE6下没什么效果。
8.可突出显示当前所在页
Superfish的用法
1.制作一个纯CSS目录
2.将下面内容添加到你的网站
[html] view plaincopyprint? //link to the CSS files for this menu type <link rel=”stylesheet” type=”text/css” media=”screen” href=”superfish.css” /> // link to the JavaScript files (hoverIntent is optional) <script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js“></script> <script type=”text/javascript” src=”hoverIntent.js”></script> <script type=”text/javascript” src=”superfish.js”></script> // initialise Superfish <script type=”text/javascript”> $(document).ready(function() { $(‘ul.sf-menu’).superfish({ delay: 1000, // one second delay on mouseout animation: {opacity:’show’,height:’show’}, // fade-in and slide-down animation speed: ‘fast’, // faster animation speed autoArrows: false, // disable generation of arrow mark-up dropShadows: false // disable drop shadows }); }); </script>
效果请看本网站(原文)上部分导航栏
官方网址:http://users.tpg.com.au/j_birch/plugins/superfish/
原文出处:http://www.biaodianfu.com/superfish-jquery.html
相关文章推荐
- SuperFish一款基于jQuery的级联下拉菜单
- SuperFish一款基于jQuery的级联下拉菜单
- 一款基于jQuery的带文字标题上下切换焦点图
- 一款基于jQuery制作的焦点图片局部场景图片切换的特效
- 一款基于jQuery饼状图比例分布数据报表
- 一款基于jQuery的图片下滑切换焦点图插件
- 一款基于jquery打造的鼠标响应式顶部弹出窗口特效
- 分享一款基于jQuery的QQ表情插件
- 自己编写的基于jQuery的级联 下拉列表
- 一款基于jQuery和HTML5全屏焦点图
- jQuery+Superfish制作下拉菜单
- 一款基于jQuery底部带缩略图的焦点图
- 一款基于jquery和css3的头像恶搞特效
- 基于jQuery的下拉菜单插件
- 一款基于jQuery的仿百度首页滑动选项卡
- 分享一款基于jquery的圆形动画按钮
- 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
- 一款基于jquery的下拉点击改变背景图片