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 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)
  • Window width (client-side) and UA string (client-side and server-side) detection for touch and small screen plugins, plus Modernizr support, but no CSS media-queries.
  • RTL (Right-to-left) support.
  • And a whole lot more...

Requirements:

Recommended additions:

Installation:

  • Drupal 8
    1. Download the Superfish library and extract it somewhere like /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 in /sites/all/modules or /modules.
    3. Go to the Extend section of your Drupal administration back-end and enable "Superfish".
    4. Go to the "Block layout" page (under Structure) and use any of the "Place block" buttons to create a Superfish block. Use the "Configure" link of the block to configure it accordingly to your needs.
  • Drupal 6 & 7
    1. Download the Superfish library and extract it somewhere like 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 in /sites/all/modules.
    3. Go to the Modules section of your Drupal administration back-end and enable "Superfish".
    4. Go to your blocks administration page; You will see several blocks called Superfish", move any of them to a region, use the "Configure" link of the block to configure it accordingly to your needs, and save.

    Drupal 6 users need to install jQuery_update module v2.x too.

Update

For update instructions please refer to the module documentation.

Drupal 8

Please report all the issues before 8.x stable release through this page, thanks.

Pledge

#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.

Donation:

I've been developing this module and the jQuery library that comes with it for several years now, I've never requested any donation except for this cancer research donation link below I've added a few years ago - and I hope you click it because that's indeed more important - and I've always provided support for free too, but as you get older you've to make more money as a result I've made a Zazzle store to design & sell coder-friendly t-shirts and stuff; let's see how it goes :)

Buy a coder-friendly t-shirt

Help me make a little bit more so I can invest more time on open source stuff, thank you!

Help make cancer history

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

Project Information

Downloads