https://superfish.joelbirch.co/
演示地址
https://superfish.joelbirch.co/examples/
jQuery菜单插件superfish使用指南
Superfish的一些特点及效果:
使用纯Css实现动态效果,跨浏览器,支持最烂浏览器IE6
可设置下拉菜单在鼠标离开时自动隐藏时间。默认是800毫秒
支持淡入淡出动画
支持键盘响应
对含有子菜单的母菜单自动加入提示箭头
支持阴影效果,但需要有好的浏览器支持,如Firefox,chrome…最烂浏览器IE6就免了
可选回调js函数
使用说明
1、1.首先,在页面中引入Jquery和Superfish文件
1
2
|
<script src= "Jquery.js" type= "text/javascript" ><!--mce:0--></script> <script src= "superfish.js" type= "text/javascript" ><!--mce:1--></script> |
2、2.其次,用ul li做菜单内容
1
2
3
4
5
6
7
8
9
10
11
|
< 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、最后,创建初始化菜单并设置效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$(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 (){} // 子菜单隐藏时回调函数 }); }); |
以上所述就是本文的全部内容了,希望大家能够喜欢。
下载说明: 帮助教程
1.资源失效请联系QQ:1138166071补发;寻课加QQ联系
2.资源均为网络收集,仅供参考研究,请在下载后24小时内删除。不要商用和非法用途,否则后果自己承担。
3.默认解压密码:blog.qdql.net
4.购买本站资源即代表同意本站免责协议。
5.提示:本站资源属虚拟商品,购买后恕不退款。
6.特别声明本站资源部分来源于网络,如有侵权,请联系站长进行删除处理!
本文地址:http://blog.qdql.net/3621/
1.资源失效请联系QQ:1138166071补发;寻课加QQ联系
2.资源均为网络收集,仅供参考研究,请在下载后24小时内删除。不要商用和非法用途,否则后果自己承担。
3.默认解压密码:blog.qdql.net
4.购买本站资源即代表同意本站免责协议。
5.提示:本站资源属虚拟商品,购买后恕不退款。
6.特别声明本站资源部分来源于网络,如有侵权,请联系站长进行删除处理!
本文地址:http://blog.qdql.net/3621/