Customizing the dropdown menu

Last updated January 17, 2010

CSS styling

The Superfish dropdown menu script included in Fusion is intended to be easily styled with just CSS, no JavaScript customization required. The Primary Menu section in Fusion Starter’s CSS file includes lots of comments and empty CSS selectors for targeting different portions of the menu, such as the top level typography, separators, background or border colors on the dropdowns, and so on.

Unlinked top level menu items

With Fusion and the Special Menu Items module, you can overcome one of the frequent annoyances in Drupal – how to set the top level menu item of a dropdown menu to not link to a page. Fusion includes styling of the <span class=”nolink”> menu items, applied by the Special Menu Items module, to match standard linked menu items. If you want your custom subtheme to support this style, you’ll need to add the .nolink class as an additional selector anytime you add properties to the <a> tag of your primary links.

Changing the Superfish parameters

Fusion sets minimal defaults in its script.js file, but you can override any of these by placing the Drupal.behaviors.fusionSuperfish = function (context) {} function in your subtheme. This allows you to set any of the options available to Superfish, such as the speed, arrows, and drop shadows.

Changing the Superfish layout

Superfish also has several layout styles available. Since setting the default Superfish style on Drupal’s primary links requires some template.php wizardry in the first place, if you want to change which Superfish layout is used, you’ll need to use the same code in your subtheme’s template.php.

The most common option you’ll likely want to use is the navbar style, with horizontal second level links. Here is the code to paste into your template.php to add this style:

function yoursubthemename_preprocess_page(&$vars) {
  // Add Superfish navbar class if dropdown enabled
  if ($vars['primary_links'] && theme_get_setting('primary_menu_dropdown') == 1) {
      $vars['primary_links_tree'] = preg_replace('/^<ul class="menu sf-menu/i', '<ul class="menu sf-menu sf-navbar', $vars['primary_links_tree'], 1);
  }
}