Last updated April 8, 2012. Created by BartK on April 17, 2009.
Edited by shamio, GoddamnNoise, add1sun, mlangfeld. Log in to edit this page.

Superfish is an attractive jquery drop-down menu system that builds on top of UL and LI tags -- the same structure that Drupal uses to output its menus. The problem is that Drupal styles all of its menus exactly the same way, so, while it's easy enough through a theme function to change the class of every menu on the screen at once, it's a bit harder to change the class of only one of them -- hence, without this little hack, using superfish is an all-or-nothing proposition.

First, setting up Superfish:

  • Head over to the Superfish web page and download the code.
  • Add superfish.js and superfish.css to your theme's .info file (see the theming guide for details).
  • Per the Superfish instructions, add the following code to page.tpl.php after all the javascript files have loaded:
    // initialise Superfish
    <script type="text/javascript">
        $(document).ready(function() {
            $('ul.sf-menu').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
            });
        });
    </script>
  • Create a php block with the following code:
    <ul class='sf-menu'>
    <?php
    $tree
    = menu_tree_page_data('primary-links');
     
    $output = '';
     
    $items = array();
     
    // Pull out just the menu items we are going to render so that we
      // get an accurate count for the first/last classes.
     
    foreach ($tree as $data) {
        if (!
    $data['link']['hidden']) {
         
    $items[] = $data;
        }
      }
     
    $num_items = count($items);
      foreach (
    $items as $i => $data) {
       
    $extra_class = NULL;
        if (
    $i == 0) {
         
    $extra_class = 'first';
        }
        if (
    $i == $num_items - 1) {
         
    $extra_class = 'last';
        }
       
    $link = theme('menu_item_link', $data['link']);
        if (
    $data['below']) {
         
    $output .= theme('menu_item', $link, $data['link']['has_children'], menu_tree_output($data['below']), $data['link']['in_active_trail'], $extra_class);
        }
        else {
         
    $output .= theme('menu_item', $link, $data['link']['has_children'], '', $data['link']['in_active_trail'], $extra_class);
        }
      }
    print
    $output;
    ?>

    </ul>

    This will render the menu tree as normal, but with the sf-menu class, so that superfish will know what menu to theme. Doing it this way prevents Superfish from theming every single menu on your page.

Please note that configuring and theming Superfish (as well as your Drupal site in general) are well beyond the scope of this HOWTO. If any part of this doesn't make sense, I recommend reading the Drupal theming guide and the Superfish documentation to familiarize yourself with the necessary concepts.

Tutorial

Here is a step by step which has been used in several different themes including a fully customized one at http://net-spin.com/forums/drupal/superfish

Modules

You can also try out the Nice Menus or Superfish modules.

Vertical Menu Tip

Just modify first line:

instead <ul class='sf-menu'>
use <ul class='sf-menu sf-vertical'>

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.