jQuery menu plug-in superfish usage guide

jQuery menu plug-in superfish usage guide_jquery

WBOY

Release： 2016-05-16 16:02:46

Original

1874 people have browsed it

Download address: http://plugins.jquery.com/project/Superfish

Documentation description:http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

Some features and effects of Superfish:

Use pure CSS to achieve dynamic effects, cross-browser, support the worst browser IE6
You can set the drop-down menu to automatically hide when the mouse leaves. The default is 800 milliseconds
Support fade-in and fade-out animation
Support keyboard response
Automatically add prompt arrows to parent menus containing submenus
Supports shadow effects, but requires good browser support, such as Firefox, chrome...the worst browser IE6 is exempt
Optional callback js function

Instructions for use

1. 1. First, introduce Jquery and Superfish files into the page

<script src="Jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="superfish.js" type="text/javascript"><!--mce:1--></script>

Copy after login

2. 2. Secondly, use ul li to make menu content

<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>

Copy after login

3. Finally, create the initialization menu and set the effect

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

Copy after login

The above is the entire content of this article, I hope you all like it.