jQuery menu plug in superfish user guide

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.