Superfish integrates jQuery Superfish plugin with your Drupal menus.

Overview:

  • Unobtrusive JavaScript.
  • Keyboard-accessible, screen reader friendly.
  • Multi-column sub-menus. (Megamenus)
  • Easing effects with the jQuery Easing plug-in.
  • Automatic width calculation (sfAutomaticWidth plugin) (Use the development release)
  • Automatic sub-menu width calculation (Supersubs plugin), automatic sub-menu placement (Supposition plugin; prevents sub-menus from appearing off-screen.)
  • Touch-screen compatible. (almost)
  • Small-screen compatible. (<select> and vertical accordions)
  • RESS (more than just responsive! Window width (client-side) and UA string (client-side and server-side) methods for touch and small screen plugins (no media-queries))
  • RTL (Right-to-left) language support.
  • Plenty of built-in options for designers.
  • And a whole lot more...

Requirements:

  • Superfish library (Download Superfish library)
  • jQuery Update
    • Drupal 6 users: jQuery 1.3.x or higher.
    • Drupal 7 users: jQuery 1.6.1 or higher, only if you want to use the jQuery Easing plugin animation effects.
    • For jQuery 1.9 and above you must manually include the jQuery $.Browser plugin, via your theme .info file for example. (The SF library for Drupal 8 won't support IE7 hence no $.browser dependency)

Recommended additions:

Installation:

  1. Download the Superfish library and extract it to sites/all/libraries/superfish (so that the superfish.js will be located at http://example.com/sites/all/libraries/superfish/superfish.js)
  2. Download and extract the Superfish module to /sites/all/modules.
  3. Enable a Superfish block in the Blocks administration page.
  4. If the menu doesn't look good, your theme may not have a built-in style for the menu. Go back to the Blocks administration page, click 'configure' on enabled Superfish block, and choose a style from the Style list. Alternatively, you can also read the documentation to learn how to add built-in styles to your theme.
  5. Please note, the development release is pretty stable (which requires the master branch of the Superfish library) and can (or even should!) be used on production sites.

Upgrade to v1.9

There are few things you need to do before and after upgrading:

  • Before uploading the new files, please create a back up of the module (usually sites/all/modules/superfish) and Superfish library (usually sites/all/libraries/superfish) if you have made any changes to them (please note that you're not supposed to change any of those files, the only accepted change is addition of CSS files to the /style directory of the Superfish library). Use a visual comparison software (such as WinMerge or Kompare) in order to compare your current copy with its original one, find out what was changed and do the same to the version you are upgrading to.
  • After uploading the new files:
    • Go to Superfish module configuration page (D6: admin/settings/superfish & D7: admin/config/user-interface/superfish) and add the path to sfsmallscreen.js plugin (which should be sites/all/libraries/superfish/sfsmallscreen.js).
    • Clear the Drupal cache once.
    • Go to the Permissions administration page and check the Administer Superfish for the administrator role or any other role you want.
    • If are using the Plugin Manager to upgrade you will need to upgrade the Superfish library, manually because the Plugin Manager only upgrades the module.

Development release & the master branch of the SF library

  1. The development release contains the most features and the least bugs. Please use it as it helps me learn of potential bugs and issues in order to release a stable version, faster, thank you in advance.
  2. The master branch of the Superfish library is the recommended library for the development releases. Important: Do not use Drush (or Drush Make) for a development release, upload the library (the master branch) manually instead.

Tidings:

  • Apr 2014: New stable release coming soon, D8 version will be available as a stable release once D8 RC1 released.
  • Jun: Superfish is now even more responsive! with an all new accordion menu type added to the sfSmallscreen plugin; in addition, a fantastic new plugin added to the Superfish library (sfAutomaticWidth) which automatically adjusts the menu width to maximum possible, making styling quite a lot easier, especially for menus with varying parent items (such as if using i18n module), but that's not all, major performance improvements were made to everything, as a result Superfish is quite a lot faster and consumes a lot less memory. Development release is now highly recommended!
  • Mar: The jQuery Superfish plugin was not receiving any updates for about three years, the developer reappeared recently! and is doing an extensive & remarkable overhaul to the plugin, once he's done I'll start merging the changes that benefit the users of this Drupal module into the Superfish-for-Drupal Library.

Pledges:

#D7AX - I pledge to make this module as accessible as it can be. If you find any flaws, please submit an issue. Help me fix them if you can.

#D8CX: I pledge that Superfish will have a full Drupal 8 release on the day that Drupal 8 is released.

Donate

Eat one less hamburger & give a donation to cancer research, thank you!

Project Information

Downloads