Overview

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:

• Supports touch devices. On Android, iOS, Windows Phone 7 and IE10 (with touchscreen), first touch will open an associated submenu, second will follow the link. Mouse and keyboard accessibility works as normal. Note that you currently need to include Brian Cherne’s hoverIntent plugin to support certain Android browsers' and IE10's touch interaction. This may change.
• Optionally require click to open and close submenus. Added in version 1.5.2, perfected in 1.5.4. Removed in v1.7. See issue 47 for details.
• Timed delay on mouseout to be more forgiving of mouse-piloting errors. Default is 800 milliseconds but can be changed via the options object
• Animations when showing submenus (and when hiding them, as of version 1.5.2). uses a fade by default but can be given custom objects to be used by the animate functions. The animation speed is also customisable.
• Keyboard accessibility. Tab through the links and the relevant submenus are revealed and hidden as needed
• Supports the hoverIntent plugin. Superfish automatically detects the presence of Brian Cherne’s hoverIntent plugin and uses its advanced hover behaviour for the mouseovers (mouseout delays are handled by Superfish regardless of the presence of hoverIntent). Using this is only an option, but a nice one. The examples on this site are using hoverIntent. If for some reason you want to use hoverIntent on your page for other plugins but do not want Superfish to use it you can set the option disableHI to true. Important note: As of v1.5.1 you must use the updated version (r7) of hoverIntent which supports event delegation.
• Indicates the presence of submenus by adding CSS-based arrows to relevant anchors. You can turn off the arrows via the “cssArrows” option, if required.
• Can show the path to your current page while the menu is idle. The easiest way to understand this is to view the nav-bar example. Note that you need to add 'current' (or similar) classes to the relevant list item elements yourself, ideally server-side.
• Optional callback functions. These callbacks allow for further enhancements and functionality to be added without needing to alter the core Superfish code.
• Provides public methods hide and show that you can call on list items that have submenu children. Also provides a destroy method for uninitialising Superfish. Here is an example page demonstrating the methods in action
• Uses event delegation as of v1.5.1 for greater performance and flexibility.

Quick Start Guide

1. Begin with a working pure CSS dropdown menu based on nested unordered lists. For each li:hover selector in your CSS, add an equivalent li.sfHover selector. Use display:none to hide submenus. To make this step easy, there are cross-browser CSS files for a variety of menu types included in the Superfish download.

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

2. Link to the superfish.js file (after including jQuery) using a script tag in the head of your document.

   <script src="jQuery.js"></script>
   <script src="superfish.js"></script>

3. Call superfish() on the containing ul element.

   <script>
   	jQuery(document).ready(function() {
   		jQuery('ul.sf-menu').superfish();
   	});
   </script>

   There are many options available to customise your menu. You can find out about them on the Options page of this site.