多级菜单插件-SUPERFISH
演示效果:
使用方法:
1、引入样式文件:
Markup
<link href="superfish.css" rel="stylesheet" media="screen">
2、引入js文件:
Markup
<script src="jQuery.js"></script>
<script src="superfish.js"></script>
3、代码中调用
Markup
<script>
jQuery(document).ready(function() {
jQuery('ul.sf-menu').superfish();
});</script>
常用参数
Markup
$.fn.superfish.defaults = {
popUpSelector: 'ul,.sf-mega', // selector within menu context to define the submenu element to be revealed
hoverClass: 'sfHover', // the class applied to hovered list items
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, // the delay in milliseconds that the mouse can remain outside a submenu without it closing
animation: {opacity:'show'}, // an object equivalent to first parameter of jQuery’s .animate() method. Used to animate the submenu open
animationOut: {opacity:'hide'}, // an object equivalent to first parameter of jQuery’s .animate() method Used to animate the submenu closed
speed: 'normal', // speed of the opening animation. Equivalent to second parameter of jQuery’s .animate() method
speedOut: 'fast', // speed of the closing animation. Equivalent to second parameter of jQuery’s .animate() method
cssArrows: true, // set to false if you want to remove the CSS-based arrow triangles
disableHI: false, // set to true to disable hoverIntent detection
onInit: $.noop, // callback function fires once Superfish is initialised – 'this' is the containing ul
onBeforeShow: $.noop, // callback function fires just before reveal animation begins – 'this' is the ul about to open
onShow: $.noop, // callback function fires once reveal animation completed – 'this' is the opened ul
onBeforeHide: $.noop, // callback function fires just before closing animation – 'this' is the ul about to close
onHide: $.noop, // callback function fires after a submenu has closed – 'this' is the ul that just closed
onIdle: $.noop, // callback function fires when the 'current' submenu is restored (if using pathClass functionality)
onDestroy: $.noop // callback function fires after the 'destroy' method is called on the menu container
};
下一篇 >>