npm install superfish -s  or  Download

Options

Superfish’s default options:

$.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
  onHandleTouch: $.noop              // callback function. Use this to handle touch events if the default behaviour is getting in your way
};

You can override any of these options by passing an object into the Superfish method upon initialisation. For example:

//link to the CSS files for this menu type
<link rel="stylesheet" media="screen" href="superfish.css">

// link to the JavaScript files (hoverIntent is optional)
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>

// initialise Superfish
<script>
	jQuery(document).ready(function() {
		jQuery('ul.sf-menu').superfish({
			delay:       1000,                            // one second delay on mouseout
			animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation
			speed:       'fast',                          // faster animation speed
			autoArrows:  false                            // disable generation of arrow mark-up
		});
	});
</script>
Need help? Check out the Support options available to you.
Fork me on GitHub

Created for you by Joel Birch xox

jQuery