Add Superfish Drop Menus to Any Theme, Easily

add-superfish-drop-menus-to-any-theme-easily

This post was by Jeff Burnz on Monday, October 26th, 2009 at http://adaptivethemes.com

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:

regions[header] = Header Blocks
regions[content] = Main Content
regions[left] = Sidebar Left
regions[right] = Sidebar Right
regions[footer] = Footer
regions[superfish_menu] = Superfish Menu

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

<?php if ($superfish_menu): ?>
  <div id="superfish"><?php print $superfish_menu; ?></div>
<?php endif; ?>

3. Load the JS and CSS

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

;Superfish Stuff

stylesheets[all][] = sf/css/superfish.css
stylesheets[all][] = sf/css/theme.css
scripts[]          = sf/js/superfish.js

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

<script type="text/javascript">
  $(document).ready(function() {
    $("#superfish ul.menu").superfish();
  });
</script>

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!

File Attachment: