jQuery Plugins › jQuery Menu Plugins › superfish

Touch Enabled Multi-level Drop Down Menu Plugin - superfish

File Size: 124 KB
Views Total: 30912
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE6+, FireFox, Opera, Safari#Drop Down#Drop Down Menu#touch#mobile
Touch Enabled Multi-level Drop Down Menu Plugin - superfish

superfish is a cross-browser and Touch enabled menu plugin for creating Multi-level Drop Down Menus with some animation effects.

You might also like:

Basic Usage:

1. Include the latest jQuery library and other necessary javascript files in the header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/hoverIntent.js"></script>
<script src="js/superfish.js"></script>

2. Include superfish CSS to style your drop down menu

<link rel="stylesheet" href="css/superfish.css" media="screen">

3. Initialise plugins

<script>
jQuery(function(){
	jQuery('#example').superfish({
	});
});

</script>

4. Markup HTML Structure

<ul class="sf-menu" id="example">
<li class="current"> <a href="#">menu item 1</a>
<ul>
<li> <a href="#">menu item that is quite long</a> </li>
<li class="current"> <a href="#">menu item</a>
<ul>
<li class="current"><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li> <a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li> <a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">menu item 2</a> </li>
<li> <a href="#">menu item 3</a>
<ul>
<li> <a href="#">menu item</a>
<ul>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
</ul>
</li>
<li> <a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li> <a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li> <a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li> <a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">menu item 4</a> </li>
</ul>

5. Options

$.fn.superfish.defaults = {

  // selector within menu context to define the submenu element to be revealed
  popUpSelector: 'ul,.sf-mega', 

  // the class applied to hovered list items
  hoverClass:    'sfHover',          

  // the class you have applied to list items that lead to the current page
  pathClass:     'overideThisToUse', 

  // the number of levels of sub-menus that remain open or are restored using pathClass
  pathLevels:    1,              

  // the delay in milliseconds that the mouse can remain outside a sub-menu without it closing    
  delay:         800,       

  // an object equivalent to first parameter of jQuery’s .animate() method. 
  // Used to animate the sub-menu open         
  animation:     {opacity:'show'},   

  // an object equivalent to first parameter of jQuery’s .animate() method Used to animate the sub-menu closed
  animationOut:  {opacity:'hide'},   

  // speed of the opening animation. 
  // Equivalent to second parameter of jQuery’s .animate() method
  speed:         'normal',           

  // speed of the closing animation. 
  // Equivalent to second parameter of jQuery’s .animate() method
  speedOut:      'fast',     

  // set to false if you want to remove the CSS-based arrow triangles        
  cssArrows: true,          

  // set to true to disable hoverIntent detection
  disableHI:     false,       

  // callback function fires once Superfish is initialised – 'this' is the containing ul       
  onInit:        function(){},     

  // callback function fires just before reveal animation begins – 'this' is the ul about to open  
  onBeforeShow:  function(){},       

  // callback function fires once reveal animation completed – 'this' is the opened ul
  onShow:        function(){},       
  onBeforeHide: $.noop,

  // callback function fires after a sub-menu has closed – 'this' is the ul that just closed
  onHide:        function(){},   

  // callback function fires when the 'current' sub-menu is restored (if using pathClass functionality)    
  onIdle:        function(){},   

  // callback function fires after the 'destroy' method is called on the menu container     
  onDestroy: $.noop,

  // callback function. Use this to handle touch events if the default behaviour is getting in your way
  onHandleTouch: $.noop
  
};

More Examples:

Change Logs:

v1.7.10 (2018-02-27)

v1.7.9 (2016-05-03)

  • fix minor bugs.

v1.7.8 (2016-02-27)

  • update.

v1.7.7 (2015-12-10)

  • Better way to cause taps elsewhere on the page to close submenus on iOS.

v1.7.6 (2015-08-07)

  • Let default touch functionality be extended or disabled and onBeforeShow and onBeforeHide prevent show/hide. 

v1.7.5 (2014-10-10)

  • IE11 touch compatability.

v1.7.3 (2013-06-01)

  • Alter JS to allow mega-menus. 
  • Provide mega-menu CSS and example page. 
  • Added bower.json. 
  • Resolve some jsHint issues.

v1.7.2 (2013-04-16)

  • Simplify by removing click handler and 'follow' flags (possible due to removal of useClick feature).
  • Use touch handler with '.one()' click handler to cancel link follows instead. 

v1.7.1 (2013-04-15)

  • Added missing onDestroy hook. Added tests. Handle multiple method calls silently.

v1.6.9 (2013-04-02)

  • Fix bugs

v1.6.7 (2013-03-27)

  • Fix bugs

v1.6.2 (2013-03-25)

  • Fix issue #30 regarding submenus flashing open and closed under certain conditions in Firefox. 
  • Remove bgiframe JS file as part of degraded IE6 support.

v1.6.0 (2013-03-22)

  • Refactor CSS to allow unlimited menu-tiers without needing to add extra CSS.
  • Semi-gracefully degrade IE6 (I recommend you polyfill with selectivizr.js if you need to support it) to allow reduced and simplified CSS. 
  • Prefer display:none submenu hiding rather than off-canvas - only closing animations will break if you do use off-canvas; everything else will still work. Refactor various bits of JS. 
  • Remove sfHover class prior to closing animation to avoid "trail of highlighted items" when hovering across items without hoverIntent active. 
  • Support IE9 on Windows Phone 7.
  • Include Supersubs-like CSS, making that plugin largely redundant (except its max-width capability).
  • Updated Supersubs to work with Superfish 1.6.0 just in case.
  • Fix iOS: can now close submenus by tapping elsewhere. 
  • Fix iOS: back button will reload page (only way of resetting iOS hover state!). 
  • Added onBeforeHide callback. 
  • Fix Firefox bug with useClick initialisation. 
  • Use data() to store menu options.

v1.5.13 (2013-03-15)

  • Bug fix: height animations were getting stuck
  • Minor code optimisations.

v1.5.12 (2013-03-13)

  • Bug fix: Alter initialisation code to avoid requiring menus use the "off-left" (or "off-top") method of hiding submenus. 
  • Now allows display:none method
  • Bug fix: No animation on first few hovers
  • Slight refactor of iOS-sniff.
  • Update to official hoverIntent.js file which added event delegation in r7.

v1.5.11 (2013-03-04)

  • Recode IE10 touch support to behave like other touch browsers rather than holding finger down and moving around. Now tap to open submenus which will stay open until menu is unfocussed. A subsequent tap on a link with an open submenu will follow the link. Only other webkit browsers need touchstart – Apple has its own unique hover fix and touchstart caused it weird highlight bugs. Other very minor code changes.

 

This awesome jQuery plugin is developed by joeldbirch. For more Advanced Usages, please check the demo page or visit the official website.