Customizing Superfish menus in your Fusion theme

The powerful Superfish menu system is provided by default to all Fusion sub-themes. Superfish is a jQuery plugin that takes an existing pure CSS drop-down menu and adds styling options to it. Being that it is styled purely through CSS, it gives the themer full control over how it appears all while maintaining the functionality. It also degrades nicely when JavaScript can’t be enabled and still presents the drop-down menu in a functional way.

By default the drop-down menu is set to fade in on hover, display vertically, and the hide when not hovered upon. You may want to change this behavior if you’re building your own Fusion theme. This functionality can be altered in a few ways by adding arrows to the menu items that have children (and set to expanded), change the delay for the drop-down display on hover, and even change the orientation of the menu by having it load horizontally rather than the default of vertically. There are numerous other changes that can be made to the menu system but these are some of the more common ones and I wanted to touch on those here.

Get the drop-downs to show immediately (no delay on hover)

This method involves editing the sub-theme’s script.js file and making changes to how the Superfish menu behaves. If your theme does not have a script file you can create one and load it through the theme’s .info file.

This bit of code goes into your theme’s script file and you will need to replace the “acquia_marina” text with your theme’s folder name. For example if your theme’s folder is named “sunshine_farms” your script should also read “sunshine_farms”. So be sure to change the “acquia_marina” to match your theme’s folder for this and all of the following examples.

Once the changes are made to your theme but sure to clear your site cache on the Performance page (/admin/settings/performance) so it reloads the theme files. You should now have a menu with a drop-down that displays instantly on hover rather than with a delay and fade in animation. The menu should look similar to this below:

Display arrows for menu items with children (and set to expanded)

This bit of code will make your menu items with children (and set to expanded) display an arrow after the menu item. This is a nice way to give a visual cue that there are sub menu items below the one that is currently visible. These changes also go in your theme’s script file. Again be sure to change the reference of “acquia_marina” to match that of your theme’s directory:

Horizontal drop-down menu

Technoli uses this method to display the drop-down menu horizontally rather than the default of vertically. This can be quite handy when you want a clean streamlined horizontal menu as it displays the second level horizontally and then the third level vertically. It gives it a nice touch that can easily be themed and used on your site.

Rather than editing your theme’s script file this change goes in your theme’s template.php. If there is no template.php with your theme you can create one and add this bit of code to it. Be sure to change the reference of “acquia_marina” to your theme’s directory name so it loads and works correctly.

These simple changes can be applied to any Fusion based theme. That includes existing themes such as seen here with Acquia Marina, as well as themes available for sale on our site. As long as it’s a Fusion based sub-theme it will inherit the features of the Superfish menu and can be styled to suit your needs and styles.

If you have any other methods you have used to create Superfish drop-down menu variations or changes please let us know. I’d like to see some other examples than what we have done here and see some creative uses of the drop-down menu and how we can improve upon it. Please post your examples or questions/comments below.