jQuery菜单插件Superfish

Web前端评论4阅读模式

Superfish的一些特点及效果:

使用纯Css实现动态效果,跨浏览器,支持最烂浏览器IE6
可设置下拉菜单在鼠标离开时自动隐藏时间。默认是800毫秒
支持淡入淡出动画
支持键盘响应
对含有子菜单的母菜单自动加入提示箭头
支持阴影效果,但需要有好的浏览器支持,如Firefox,chrome…最烂浏览器IE6就免了
可选回调js函数

加载JS

<script src="jquery.js" type="text/javascript"></ script>
<script src="superfish.js" type="text/javascript"></ script>

可选参数:

  $(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(){}  // 子菜单隐藏时回调函数
  });
 });

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖动滑块以完成验证