Support Center

How to create Drupal multi-column sub-menus (Megamenus) with Superfish

Last Updated: Oct 16, 2013 05:07PM EEST
All screens come from our Premium Responsive Drupal theme Social Style.

More than (just) Themes products integrate with the Superfish module supporting gorgeous multi-level drop-down menus with smooth motion. Superfish module integrates jQuery Superfish plugin with your Drupal menus.

Superfish module supports by default multi-column sub-menus. You have always the option to enable this plugin through Home » Administration » Structure » Blocks » Superfish 1 (Superfish)' block » MULTI-COLUMN SUB-MENUS (BETA).



By enabling this Superfish plugin, Drupal displays children menu items together with their own children as columns rather than dropdowns. This sometimes requires the menu structure to be altered a little. 

For example, the below menu cannot be rendered correctly.
Parent Menu 1
Parent Menu 2
- Child Menu 1
- Child Menu 2
-- Sub Child Menu 1
-- Sub Child Menu 2
-- Sub Child Menu 3
- Child Menu 3
- Child Menu 4
- Child Menu 5
Parent Menu 3

Instead this menu can be rendered correctly, and as a result Parent 2 will get 3 columns.
Parent Menu 1
Parent Menu 2
- Child Menu 1
-- Sub Child Menu 1
-- Sub Child Menu 2
- Child Menu 2
-- Sub Child Menu 1
- Child Menu 3
-- Sub Child Menu 1
-- Sub Child Menu 2
-- Sub Child Menu 3

Check out for example the following structure to the Social Style Main menu:



and this is the final result:



Please note that you should ENABLE the "Default" Style for your Superfish menu if this is already set to "None" through Home » Administration » Structure » Blocks » Superfish 1 (Superfish)' block » SUPERFISH SETTINGS » Style.



Finally and regarding our Social Style http://www.morethanthemes.com/?q=themes/socialstyle, please just add the following style rules to your local.css (sites/all/themes/socialstyle/local.css) file for a better style of the multi-column sub-menus.
#main-navigation .block-superfish ul ul.sf-megamenu { background:#ffffff; }

#main-navigation .block-superfish ul ul.sf-megamenu li a { line-height:150%; }


​Regarding the Superfish documentation and mega-menus, you can find more info here
http://drupal.org/node/1125896

In case this article leaves any of your questions or concerns unanswered, please feel welcome to email us or post a public question.

​More than (just) Themes
http://www.morethanthemes.com/

Contact Us

[email protected]
http://assets2.desk.com/
false
morethanthemes
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete