While some themes have a “Menu” region that displays at least one level of nested sub-menu items, in order to display complex menus, you generally need to install additional modules. For dropdown menus, Nice Menus and Superfish are the most widely used options. Both modules are widely used and comparable in functionality, but some themes are optimized to work with one or the other. For “mega menus” (complex, multi-column sub-menus that appear when you hover over a top-level menu item), the Superfish module can accommodate that arrangement, or you can use a dedicated mega menu module like TB Mega Menu.

Superfish is the dropdown menu module recommended for the theme we will use for the example site, but Nice Menus works largely the same way. Download, install and enable the Superfish module. Download the Superfish library, linked from the module page and listed in the documentation. Unzip it, rename it “superfish”, and upload it to the sites/all/libraries folder (see section 4.5.2.2 for more about adding libraries). If you want to add animation effects to your menu (e.g. having sub-menus “bounce” or “slide” open), you’ll also need to add the jQuery Easing library (also linked from the Superfish module page), as well as add the jQuery update module, to update your Drupal site’s core version of the jQuery library to version 1.6.1 or higher. Download the jQuery Easing library, rename it jquery.easing.js, and put it in in sites/all/libraries/easing.

Once you’ve done this, go to the Modules page and enable Superfish, as well as jQuery Update if you want to use the animation effects. If you’ve enabled jQuery Update, first configure it by going to Configuration > Development > jQuery update (admin/config/development/jquery_update). Set the default jQuery version to 1.8, if you’re using version 7.x-1.9 of the Superfish module. (Note: For the Superfish module to work without needing any workarounds, either use a version of the module higher than 7.x-1.9 (or the current development version), or upgrade jQuery to a version less than 1.9. Superfish 7.x-1.9 breaks with jQuery 1.9 or higher.)

Next, go to the Blocks page (Structure > Blocks). You should see four disabled blocks, “Superfish 1 (Superfish)” through “Superfish 4 (Superfish)”. Click the “configure” link for one of them.

On the configuration screen, provide a more informative block description than “Superfish [number]”, such as “Main menu (dropdown)”. It’s important to choose something other than just the menu name, because there’s already a block for each menu where the block description is the menu name (the default display of the menu, as described in section 11.3.5). Leave the block title empty.

Under “Menu parent”, select the menu you want to display using Superfish. The default menu depth of -1 is generally the right choice, as is leaving “Take “Expanded” option into effect” unchecked.

Under “Superfish settings”, there are a number of configuration options:

• Menu type: horizontal (where sub-items open as a vertical drop-down column), vertical (where sub-items open as a vertical column to one side), or navbar (horizontal, but where sub-items open as a parallel horizontal row)
• Style: Superfish comes with a number of different styles, which provide different colors and spacing. Most are not very attractive, and odds are they will clash with your site’s theme. If your theme is designed to work with Superfish (such as the AdaptiveTheme theme family discussed in chapter 18), change the style from “none” to “default”. If you want to manually change the design of the Superfish menu, follow the “How to style” instructions in the README.txt file in the Superfish module folder, or in the Superfish documentation.
• Animation speed: how long it takes for the animation transitions to take place; you can choose “slow”, “normal”, “fast” (the default), or enter a time in milliseconds.
• Mouse delay: how long, in milliseconds, the mouse can be outside a menu before the menu closes.
• Path class and path levels: leave these with their default values.
• Slide in effect: where the sub-menu items should come from. “Vertical” means they slide in from the top, “Horizontal” means they slide in from the left, “Diagonal” means they come in from the top left. If you added the jQuery Easing library, there’ll also be a long list of animations that begin “easeIn”. See the Drupal for Humanists website for a link to demos of these animations.

Under “Superfish plugins”, you can choose to enable options to make the menus compatible with touchscreens and small screens (or small browser windows). After you’ve enabled these, the default configuration for them is generally fine.

Under “Multi-column sub-menus”, you can turn on Superfish’s mega menu functionality, and specify at what level of depth the multi-column sub-menus should begin, and how many levels should be included in the multi-column menu. Superfish’s multi-column sub-menus use the parent menu items at a particular level as column headers, and treat the children of each “header” item as the contents of the column. It is not a solution for menus with so many items that a drop-down interface isn’t feasible.

The Advanced HTML and Advanced CSS settings are only helpful if you’re doing custom theming for the menu.