SuperFish Drop-down Menus

SuperFish is a jQuery plugin that we use to create beautiful, easy-to-use drop-down menus that degrade nicely in older browsers like IE 6. SuperFish also includes some nice UI enhancements, such as:

  • Timed delay on mouseout to be more forgiving of mouse-piloting errors.
  • Animation of sub-menu reveal.
  • Keyboard accessibility. Tab through the links and the relevant sub-menus are revealed and hidden as needed.

You can enable/disable the Primary Menu drop-down functionality in the theme's settings. Just go to Site Configuration -> Themes -> Configure -> Fusion Clean Commerce. Scroll down to Theme-Specific Settings -> Fusion Theme Settings -> General Settings -> Navigation -> Primary Menu and toggle the checkbox for enabling drop-downs.

In addition, you can make any block menu into a SuperFish vertical drop-down menu by simply editing your block settings. Go to Site Building -> Blocks -> Fusion Clean Commerce. Find the menu block you would like to turn into a vertical drop-down menu and click the "configure" link. Now on the block settings page, scroll down to find the heading "SuperFish Menu Styles" and select the "Vertical menu (for sidebar blocks)" option.

Check out the right sidebar on this page to find an example of a SuperFish vertical drop-down menu.