多级下拉菜单:superfish的应用
2010-10-14 16:32
190 查看
superfish是一款可以***多级下拉菜单的jquery插件,支持水平和垂直方向的菜单,下拉的菜单不会被标签select遮挡,支持动态下拉效果,如垂直向下伸展,支持阴影效果(IE6除外),用户可定制样式。
查看演示 下载源码
主要特性:
如何使用?
1、准备Javascript及插件和CSS样式文件。
2、XHTML。
一定要注意XHTML的结构,上述代码中“...”是限于篇幅,表示相同的代码结构重复n次。
3、应用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,使用方法:
更多信息请查看superfish官网:http://users.tpg.com.au/j_birch/plugins/superfish/
查看演示 下载源码
主要特性:
如何使用?
1、准备Javascript及插件和CSS样式文件。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/superfish.js"></script> <link rel="stylesheet" type="text/css" href="css/superfish.css" />
2、XHTML。
<ul class="sf-menu"> <li><a href="#">首页</a></li> <li><a href="#">新闻</a> <ul> <li><a href="#">国内</a> <ul> <li><a href="#">menu item1</a></li> <li><a href="#">menu item2</a> <ul> <li><a href="#">Sub menu1</a></li> <li><a href="#">Sub menu2</a></li> ... </ul> </li> <li><a href="#">menu item3</a></li> </ul> </li> <li><a href="#">国际</a></li> <li><a href="#">社会</a></li> ... </ul> </li> <li><a href="#">短信</a> <ul> <li><a href="#">短信</a></li> <li><a href="#">彩信</a></li> <li><a href="#">彩铃</a></li> <li><a href="#">SP</a></li> </ul> </li> ... </ul>
一定要注意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});
更多信息请查看superfish官网:http://users.tpg.com.au/j_birch/plugins/superfish/
相关文章推荐
- 多级下拉菜单:superfish的应用
- Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
- CSS绿色水平多级下拉菜单
- 应用多级缓存模式支撑海量读服务
- 【JavaScript 11—应用总结】:下拉菜单
- 导航多级下拉菜单
- 形形色色的下拉菜单 (菜单中文变英文+多级菜单)
- C/C++中指针,多级指针的理解和应用
- 多级下拉菜单的级连显示问题
- android 多级下拉菜单实现教程
- 多级指针的应用一(字符串的切割)
- Bootstrap 3 & 4 的多级下拉菜单示例
- jQuery插件cxSelect多级联动下拉菜单实例解析
- 枚举enum在velocity模板语言中的应用-下拉菜单
- 可配置多级指标投票打分应用设计(2)
- js自定义多级联动下拉菜单,实用方便
- 【JavaScript 11—应用总结】:下拉菜单
- 联动下拉菜单应用
- 应用多级缓存模式支撑海量读服务