superfish的应用
来源:互联网 发布:淘宝天猫积分怎么兑换 编辑:程序博客网 时间:2024/05/18 23:14
多级下拉菜单:superfish的应用
superfish是一款可以制作多级下拉菜单的jquery插件,支持水平和垂直方向的菜单,下拉的菜单不会被标签select遮挡,支持动态下拉效果,如垂直向下伸展,支持阴影效果(IE6除外),用户可定制样式。
查看演示下载源码
主要特性:
如何使用?
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鼠标离开下拉展开的菜单,等待关闭菜单的时间(毫秒)800animation菜单展示效果{opacity:'show'}speed设置菜单展开速度,可以为'slow','fast','normal''normal'disableHI设置为true时,则不支持hoverIntent插件truesuperfish插件还可以支持回调函数,支持hoverIntent插件,在有hoverIntent插件的情况下执行hoverIntent而忽视淡入淡出效果。如果基于某种原因在你使用superfish时不想使用hoverIntent,将disableHI设置为 "true"。
此外当遇到select标签时,为了不让下拉菜单被select遮挡,需要调用另一个插件:bgiframe,使用方法:
$("ul.sf-menu").superfish().find('ul').bgIframe({opacity:false});
0 0
- superfish的应用
- Superfish
- 设置superfish控件的宽度
- 让superfish的菜单在左边显示
- SuperFish一款基于jQuery的级联下拉菜单
- Superfish高亮显示当前页面的菜单项
- Superfish事件:自签名SSL证书惹的祸
- Superfish事件:自签名SSL证书惹的祸
- Superfish事件:自签名SSL证书惹的祸 分析
- superfish.js
- 万恶的火狐插件IE Tab Plus+引起的Superfish.com
- superfish代码注释
- Superfish下拉菜单模块
- Jquery控件superfish
- superfish插件基本使用
- jQuery+Superfish制作下拉菜单
- jQuery+Superfish制作下拉菜单
- jQuery+Superfish制作下拉菜单
- 滑轮控件研究三、GestureDetector的中手势事件的测试
- Topcoder SRM 648 Div.2 - A(水), B(枚举),C(DP/构造)
- Pascal's Triangle
- Uber 快的 滴滴
- 【转】php,asp与jsp的区别
- superfish的应用
- javascript中prototype方式面向对象编程注意事项
- 初创互联网团队如何利用开源技术和云服务快速建立网站
- 完美解决android scrollview嵌套listview
- linux实操常用命令总结
- blog其实是一种理性思维和表达能力的训练
- 海外优秀资讯抢先看8 - Windows 10 for Raspberry Pi 2
- 面试题4 替换空格
- 滑轮控件研究二、GestureDetector的深入研究