
Superfish是一款简洁的多级导航菜单插件。
使用步骤
1、添加对相关的js和css文件的引用
<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() 函数
jQuery(function(){ jQuery('ul.sf-menu').superfish();});
3、在 body 中加入一下格式的html标签
<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>
参数配置
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标签
});