jQuery菜单插件superfish使用指南
下载地址:http://plugins.jquery.com/project/Superfish
文档说明:http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started
Superfish的一些特点及效果:
使用纯Css实现动态效果,跨浏览器,支持最烂浏览器IE6
可设置下拉菜单在鼠标离开时自动隐藏时间。默认是800毫秒
支持淡入淡出动画
支持键盘响应
对含有子菜单的母菜单自动加入提示箭头
支持阴影效果,但需要有好的浏览器支持,如Firefox,chrome…最烂浏览器IE6就免了
可选回调js函数
使用说明
1、1.首先,在页面中引入Jquery和Superfish文件
<script src="Jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="superfish.js" type="text/javascript"><!--mce:1--></script>
2、2.其次,用ul li做菜单内容
<ul class="sf-menu">
<li><a href="#aa">menu item that is quite long</a></li>
<li class="current">
<a href="#ab">menu item →</a>
<ul>
<li class="current"><a href="#">menu item</a></li>
<li><a href="#aba">menu item</a></li>
<li><a href="#abb">menu item</a></li>
</ul>
</li>
</ul>
3、最后,创建初始化菜单并设置效果
$(document).ready(function(){
$("ul.sf-menu").superfish({
hoverClass: 'sfHover', //当鼠标掠过时的class
pathClass: 'overideThisToUse', // 激活的菜单项的class
pathLevels: 1, // 菜单级数
delay: 800, // 下拉菜单在鼠标离开时自动隐藏时间。默认是800毫秒
animation: {opacity:'show'}, // 动画效果,参考Jquery的动画jQuery's .animate()
speed: 'normal', // 动画速度, 参考Jquery的动画jQuery's .animate()
dropShadows: true, // 阴影效果,关闭用‘false'
onInit: function(){}, // 初始化的回调函数
onBeforeShow: function(){}, // 子菜单显示前回调函数
onShow: function(){}, // 子菜单显示时回调函数
onHide: function(){} // 子菜单隐藏时回调函数
});
});
以上所述就是本文的全部内容了,希望大家能够喜欢。
热文精选
更多资讯推荐
更多- Stable Diffusion 2.0 发布,加强成人内容过滤
- .NET 7 正式发布
- A3Mall 开源商城系统 v2.1 发布
- FydeOS v14 版本更新:优化输入法体验+重构安卓子系统+全新应用启动器
- ThinkPHP V6.0.8版本发布——多环境变量配置支持
- 毕昇 JDK 8u292、11.0.11 发布!
- KubeVela 1.0:开启可编程式应用平台的未来
- Eclipse 4.19 稳定版发布
- 阿里巴巴 Arthas 3.5.0 版本发布,支持反编译打印行号和统一鉴权
- Debian 11 Bullseye 即将进入冻结,Debian 13 代号 Trixie
- Rancher 2.5 发布,新增支持边缘集群的 GitOps
- FlashDB IoT 超轻量级嵌入式数据库