Adding Superfish Menus to Drupal 6 Theme

In porting a custom design for a client, I looked in vain for a comprehensive online tutorial on integrating Superfish menus into my theme. One of the requests was to use background images at the primary link level which, in the end, was sacrificed to the ability to keep a more dynamic menu structure in place. I was, however, successful in getting the Superfish menu to work. The following steps outline how I accomplished this.

  1. Download and untar (extract) the Superfish plugin. Make a directory in your theme folder called 'sf' and extract the contents there.
  2. In your custom theme directory, you should have a theme-settings.php file. Open this and insert the following snippets (replace 'yourtheme' with the name of your theme).
    • In the $defaults = array section, add:
    • 'yourtheme_superfish' => 0,
    • Add the following block (making sure to change the theme name):
    • $form['yourtheme_superfish'] = array(
          '#type' => 'checkbox',
          '#title' => t('Enable Superfish Drop Menus'),
          '#default_value' => $saved_settings['yourtheme_superfish'],
          '#description' => t('Check this setting to enable support for Superfish drop menus. NOTE: In order for the drop menu to show you MUST uncheck Primary links in the "Toggle display" settings. See the README for full instructions.'),
        );
  3. In 'yourtheme.info' add the following region to the list:
    • regions[superfish] = Superfish menu
  4. In page.tpl.php, add the following into the head section of the template (note that there are variables that can be changed to further customize how the menus work on your site - check out the options available for more information:
    • <?php if ((theme_get_setting('yourtheme_superfish')) && ($superfish)): ?>
          <script type="text/javascript">
            $(document).ready(function() {
              $('#superfish-inner ul').superfish({
                  delay:       1000,                      // one second delay on mouseout
                  animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation
                  speed:       'fast',                     // faster animation speed
                  autoArrows:  false,                  // disable generation of arrow mark-up
                  dropShadows: false                 // disable drop shadows );
                });
                $('.nav li li:has(ul) > a').addClass('subfish');
            });
          </script>
        <?php endif; ?>
  5. And the following snippet in the body section:
    • <?php if ((!empty($primary_links)) || (!empty($superfish))): ?>
                <!-- Primary || Superfish -->
                <div id="<?php print $primary_links ? 'primary' : 'superfish' ; ?>">
                  <div id="<?php print $primary_links ? 'primary' : 'superfish' ; ?>-inner">
                    <?php if (!empty($primary_links)) {
                            print theme('links', $primary_links);
                          }
                          elseif (!empty($superfish)) {
                            print $superfish;
                          }
                    ?>
                  </div> <!-- / inner -->
                </div> <!-- /primary || superfish -->
               <?php endif; ?>
  6. Log on to yoursite->admin->site building->themes and select your theme in configuration mode. Deselect Primary Links in  the Toggle Display section. Select 'Enable Superfish Drop Menus'.
  7. The rest is CSS.

NOTE: Step 2 updated 7/5/2009 to correct a settings issue. 'Saved' settings now being reflected in theme configuration.