Add Superfish Drop Menus to Any Theme, Easily

How to add a Superfish drop menu to Genesis or Adaptivetheme is one of the most common questions I get. Believe when I say I get emails from well intentioned Drupal users on a weekly basis asking me this. So now, please stop emailing me, I relent, heres how its done.

1. Get the Files

First, download the archive attached to this page. Unzip it and place in your theme.

2. Create A New Region

Open up your themes info file and add this to the regions list. If there isn’t one you’ll have to add all the Drupal 6 default regions as well (don’t ask me why), as in the following:

Then add the new region to your themes page.tpl.php, with a wrapper DIV with the CSS id #superfish.

3. Load the JS and CSS

Back to your themes info file now, add the following:

One more coding step and we’re there - add this snippet to the head of your page.tpl.php file:

Right on, now you need to clear the theme registry (go to Performance settings and click Clear Cache Data so the new info file stuff is loaded into the theme registry).

4. Build a Menu and Set it up

This bit is the easy bit - build a new Drupal menu. Set the parent items to be “expanded” in your menu’s configuration screen. See the screenshot below where I’m using the Navigation menu for a test. Then go to the blocks page and add the menu block to the superfish_menu region.

5. Style It

sf/css/theme.css has the colors and is the one you’ll want to be editing. Good luck!