Superfish Mega Menus

Posted by Jonathan Dale on February 19, 2013

Early last year, we discussed a few of the available solutions for building mega menus in Drupal 7. At that time, the method for building a Simple Mega Menu required doing some calculations and applying that logic using CSS. Now we have an even easier method available via the Superfish module.

Multi-column sub-menus

Superfish for Drupal 7 provides support for simple mega menus using the multi-column sub-menus plugin which is available out of the box. Using it is as simple as structuring your menu and configuring the Superfish menu block with the appropriate options.

I found that multi-column sub-menus tend to work best with menus which have a simple two-layer structure. An example of this structure can be seen here.

With this structure in place, you can configure the Superfish block settings. Start by going to admin/config/user-interface/superfish and verifying that you have at least one Superfish block enabled.

Then go to admin/structure/block and click Configure on the Superfish block. The critical setting here is to Enable multi-column sub-menus as shown here:

Once this is saved, you should now have a simple mega menu ready to be styled.

Caveats

While preparing this article, I did note that if a parent menu item does not contain any children this will break the layout. At this time, the best solution is to ensure that your menu does not contain any empty parent menu items. Alternatively, you can specify particular menu items to be excluded, however, it would be nice if the Superfish module offered the ability to exclude those items automatically.

What are your thoughts? Have you found any unique or interesting ways to create simple mega menus? Let us know in the comments.

MONTHLY MARKETING INSIGHTS.

Get thought-provoking and actionable insights to improve how your firm makes a connection with your customers.

RELATED POSTS

LEAVE A COMMENT

The content of this field is kept private and will not be shown publicly.
About text formats

Plain text

  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
Submitted by rooby on Tue, 02/19/2013 - 10:39pm

Is enabling the multi-column sub-menus literally the only thing you changed in the superfish settings?

It doesn't want to work for me.

Submitted by Jonathan Dale on Thu, 02/21/2013 - 9:26am

@rooby, Yes, the only change was to enable the multi-column sub-menus. What theme are you using? Any other menu modules in use?

Submitted by rooby on Thu, 02/21/2013 - 2:06pm

Ended up getting it working. Our designer just had a lot of CSS to do.

It was a custom theme, which probably contributed to it, but also I'm using 1.8, so maybe it is better in 1.9 beta or latest dev.

Thanks for the reply.

Submitted by Jonathan Dale on Thu, 02/21/2013 - 2:41pm

@rooby, Yes, Superfish does introduce the need to apply a number of CSS rules and I believe that 1.9 beta does make the process easier. Glad to hear it is working for you.

Submitted by James on Tue, 03/19/2013 - 10:51am

Using a combination of Ultimenu (http://drupal.org/project/ultimenu) and Menu block (http://drupal.org/project/menu_block)

Ultimenu allows you to create a new menu block based on a current menu. From that each menu item you select adds a new region to the theme in to which you can place blocks.

Then using Menu Block you can create the different sub-menus for the main child terms. It is a fair amount of work to set up but once set up is far better than Superfish in my opinion. If you are a coder you can automate most of it thanks to Menu Block providing an API to generate blocks programmatically.

Then you just add the menu blocks in to the necessary regions and it's not just limited to menu blocks, you can put any blocks in there including Views.

Submitted by CS on Thu, 06/27/2013 - 1:45am

Any chance you could go into details on this? I'm doing a custom theme, but I'm having a hard time even finding a reference for what I need to know that SuperFish wants/needs to work.

Submitted by Jonathan Dale on Thu, 06/27/2013 - 7:56am

@CS: Is your theme based on another or is it fully custom? What version of Drupal and Superfish module are you using?

Submitted by Byron on Wed, 07/10/2013 - 10:37am

Did anyone get the "Exclude below menu items" to work?

Does not work for me, but I don't understand where the menu id number is coming from. Anyone know?

I tried: 3 since it is the third item in the menu list (admin page). Still comes up menu menu. Maybe I misunderstand the purpose?

"Enter the ID number of the parent menus item you do not want multi-column sub-menus for. (Comma separated)
Example: 5,10,20"

Submitted by Renaee on Mon, 08/05/2013 - 8:49pm

I have found that even using the default theme of drupal 7 (garland) that I cannot get the mega menu to work. I have a menu that has children in each item. I have ticked the box for mega menu, but columns do not display.

Submitted by Jonathan Dale on Tue, 08/06/2013 - 10:41am

@Renaee Can you tell me what version of D7 you are using and what version of the Superfish module you are using?

Submitted by Renaee on Tue, 08/06/2013 - 6:30pm

Hi it was drupal 7.21 and it was the dev version 7.1 of superfish with the recommended master branch of superfish library and the other required modules and js. But I am going to do a clean install of just drupal 7.22 and superfish and see if I can get it to work, that way I can eliminate any other problems that may be causing it. will let you know, thanks.

Submitted by Jonathan Dale on Mon, 08/12/2013 - 9:49am

@Renaee I have re-tested this using Drupal 7.23 and Superfish module 7.x-1.9 with the superfish library recommended in the README and found that the Menu Type and Style settings within the block configuration also have an impact on getting this to work. This likely reflects changes made since this article was originally written.

Submitted by Renaee on Mon, 08/12/2013 - 6:16pm

I have used the 'main menu' and stuck with the default drupal theme. I tested it on D7.22 last week without success. Can you elaborate on what you mean by the style settings within the block configuration? thanks.

Submitted by Jonathan Dale on Wed, 08/14/2013 - 3:07pm

@Renaee The Menu Type and Style settings can be found on the block configuration page. I found that this worked best using the horizontal menu type and that there were a couple of the superfish styles which did not appear to have the correct css classes to support horizontal menus.

Submitted by codeMode on Thu, 01/09/2014 - 12:56pm

You can find your menu id by going to your menu settings, editing the menu item in question, then cutting it out of the node id. Eg: node/9 has an id of "9". When entering multiple ids to exclude, do not use any spaces - only commas.