插件描述：Superfish是一款简洁的多级导航菜单插件。
Superfish是一款简洁的多级导航菜单插件。
使用步骤
1、添加对相关的js和css文件的引用
1 2 3 4 | <link href="css/superfish.css" rel="stylesheet" media="screen" type="text/css" /><script type="text/javascript" src="js/jquery-1.2.6.min.js"></script><script type="text/javascript" src="js/hoverIntent.js"></script><script type="text/javascript" src="js/superfish.js"></script> |
2、在指定的元素上调用 superfish() 函数
1 | jQuery(function(){ jQuery('ul.sf-menu').superfish();}); |
3、在 body 中加入一下格式的html标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <ul class="sf-menu"> <li> <a href="#a">1级菜单</a> <ul><li> <a href="#aa">2级菜单</a></li> <li><a href="#ab">2级菜单</a><ul><li><a href="#">3级菜单</a></li></ul></li> </ul> </li></ul> |
参数配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | jQuery('ul.sf-menu').superfish({ hoverClass: 'sfHover', 当鼠标移动到菜单上的样式 pathClass: 'overideThisToUse', the class you have applied to list items that lead to the current page pathLevels: 1, // the number of levels of submenus that remain open or are restored using pathClass delay: 800, //当鼠标移出子菜单后能继续显示的毫秒数 animation: {opacity:'show'}, // 相当于jQuery的$ .animate()方法夫人第一个参数 speed: 'normal', // 动画速度. 相当于 jQuery的$ .animate() 方法的第二个参数 autoArrows: true, // if true, arrow mark-up generated automatically = cleaner source code at expense of initialisation performance dropShadows: true, // 菜单是否有阴影效果，默认 ture 有阴影 disableHI: false, // set to true to disable hoverIntent detection onInit: function(){}, // Superfish 初始化完成后的回调函数 'this' 代表包含的ul标签 onBeforeShow: function(){}, // 开始展开动画之前的回调函数 'this' 代表将要开始被展开的 ul 标签 onShow: function(){}, // 一旦展开动画完成时的回调函数 'this' 代表被展开的 ul 标签 onHide: function(){} // 当子菜单关闭时的回调函数 'this' 代表刚刚被关闭的ul标签}); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： JS水印插件不遮挡底部元素
- 下一个特效： 炫酷的jquery幻灯片插件-SLIDESJS