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

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

Some features and effects of Superfish:

Dynamic effects using pure Css, cross-browser, support for the worst browser IE6 The drop-down menu can be set to automatically hide the time when the mouse leaves. The default is 800 milliseconds Supports fade in and fade out animations Support keyboard response Automatically adds a prompt arrow to the parent menu containing submenus Supports shadow effects, but requires good browser support such as Firefox,chrome… The worst browser is IE6 Optionally, call back the js function

Directions for use

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>

2, 2. Next, use ul li for the menu

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

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

  $(document).ready(function(){
  $("ul.sf-menu").superfish({
    hoverClass:  'sfHover', // When the mouse is over class
    pathClass:   'overideThisToUse', //  Of the activated menu item class
    pathLevels:  1,    //  Menu series
    delay:     800,    //  The drop-down menu automatically hides the time when the mouse is away. The default is 800 ms
    animation:   {opacity:'show'}, //  Animation effects, reference Jquery The animation jQuery's .animate()
    speed:     'normal',  //  Animation speed,   reference Jquery The animation jQuery's .animate()
    dropShadows:  true,   //  Shadow effect, close with ' false'
    onInit:    function(){},  //  Initializes the callback function
    onBeforeShow: function(){}, //  The submenu displays the pre-callback function
    onShow:    function(){}, //  Callback function when submenu is displayed
    onHide:    function(){}  //  Callback function when submenu is hidden
  });
 });

That’s all for this article, I hope you enjoy it.