多级下拉菜单:superfish的应用
- 作者:admin
- 发表时间:2013-07-02 14:17:26
- 来源:未知
superfish是一款可以制作多级下拉菜单的jquery插件,支持水平和垂直方向的菜单,下拉的菜单不会被标签select遮挡,支持动态下拉效果,如垂直向下伸展,支持阴影效果(IE6除外),用户可定制样式。
主要特性:
如何使用?
1、准备Javascript及插件和CSS样式文件。
2、XHTML。
一定要注意XHTML的结构,上述代码中“...”是限于篇幅,表示相同的代码结构重复n次。
3、应用superfish插件。
$(function(){ $("ul.sf-menu").superfish(); });
superfish插件常用参数一览表
参数 | 描述 | 默认值 |
hoverClass | 鼠标滑向菜单项的样式 | 'sfHover' |
pathClass | 设置当前项的样式,页面初始一个当前选中状态的样式 | 'overideThisToUse' |
delay | 鼠标离开下拉展开的菜单,等待关闭菜单的时间(毫秒) | 800 |
animation | 菜单展示效果 | {opacity:'show'} |
speed | 设置菜单展开速度,可以为'slow','fast','normal' | 'normal' |
disableHI | 设置为true时,则不支持hoverIntent插件 | true |
superfish插件还可以支持回调函数,支持hoverIntent插件,在有hoverIntent插件的情况下执行hoverIntent而忽视淡入淡出效果。如果基于某种原因在你使用superfish时不想使用hoverIntent,将disableHI设置为 "true"。
此外当遇到select标签时,为了不让下拉菜单被select遮挡,需要调用另一个插件:bgiframe,使用方法:
$("ul.sf-menu").superfish().find('ul').bgIframe({opacity:false});
联系我们
一切良好工作的开始,都需相互之间的沟通搭桥,欢迎咨询。