Revisited: Mega Menus in Drupal 7
Back in September, I wrote a blog post about making Mega Menus in Drupal. After publishing the post I found numerous issues with the proposed method and ended up using another method on the project that precipitated the article. After recently receiving a few comments on the original post I realized that it was time for a followup.
Types of Mega Menus
In my opinion there are two different types of Mega Menus—Simple and Composite—and each type should be constructed in a different way in Drupal.
You are creating a Simple Mega Menu when you have a long list of menu items that you want to place in multiple columns ordered top to bottom then left column to right column. For example, the City of Houston has some long menus that could be easily turned into multi-row mega menus.
A Composite Mega Menu is different because instead of being one long list of like menu items, it is made up of many different elements. For instance, a Composite Mega Menu may have secondary and tertiary menu items listed together along with an image or other content in the same dropdown. A great example of this type of menu is Whitehouse.gov:
Simple Mega Menu
Implementing a Simple Mega Menu can be done exclusively with CSS as long as the menu list is a fixed number of items and won’t change. If the number of items changes, you would need to update the CSS manually (An override function could be written to make this dynamic, but the CSS way is so easy. Besides, how often do menus really change once they’ve been setup?).
Assuming your dropdown menu is written as an unordered list, then the HTML for your menu would look something like this:
<ul class="”dropdown-box”"> /* wraps the secondary menu items. */
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
etc...
</ul>
To make the list into a multi-column mega menu, we first need to do some calculations. In this example we will have 24 total items we want to divide into three columns. Use this worksheet to help you calculate the needed values.
- Total number of menu items: 24
- Total number of columns: 3
- Divide #1 by #2 for the number of items in each column: 8 (Round up to the nearest whole number.)
- Desired Width per column: 155px
- Desired Height per item: 18px
- Multiply #2 by #4 for the total width of the dropdown box: 465px
- Multiply #3 by #5 for the total height of the dropdown box: 144px
Now that we have all of the necessary values we can build the css using nth-child psuedo classes. (For more info read: How nth-child Works and Useful nth-child Recipes)
CSS Code:
ul.dropdown-box {
width: 465px; /* value #6 */
height: 144px; /* value #7 */
}
ul.dropdown-box li {
width: 155px; /* value #4 */
float: none;
clear: none;
line-height: 18px; /* value #5 */
position: relative;
margin-left: 0px;
}
ul.dropdown-box li:nth-child(n+8) { /* value #3 */
margin-left: 155px; /*value #4
}
ul.dropdown-box li:nth-child(n+15) { /* (value #3 X 2) - 1 */ /* If there were more columns repeat this declaration and increment the multiplier each time. */
margin-left: 310px; /*(value #4 X 2) /* If there were more columns repeat this declaration and increment the multiplier each time. */
}
ul.dropdown-box li:nth-child(7n+8) { /*(value #3 - 1) /* value #3 */
margin-top: -144px; /* Negative value #4 */
}
Composite Mega Menu
Believe it or not, Composite Mega Menus are much easier to explain, because there is a module. The Menu Views module allows you to attach a view inside a menu item; since Views can be lists of item, node teasers, and so much more, the options are endless. It would be overkill to use this module for the Simple Mega Menus, but for anything else it’s brilliant. You could even reproduce the Whitehouse.gov menu by placing a node teaser in the header or footer of a HTML list view. LevelTen, the creators of this module, wrote an article introducing the Menu Views module that you might want look at if you are considering this approach.
Mega Conclusion
If you find any of this helpful, please let us know in the comments. Dissenting opinions are also welcome.
MONTHLY MARKETING INSIGHTS.
Get thought-provoking and actionable insights to improve how your firm makes a connection with your customers.
LEAVE A COMMENT
What are your thoughts on using the MegaMenu Module for menus that change? That way you wouldn't have to edit the CSS if a item is added/removed.
@Nate: I personally wouldn't use that module in it's current state on D7. It only has a -dev version and the last commit to the D7 branch was in April of last year. It may be better on D6, but we build new site on D7 now.
A small custom module could easily make the changes in css for you every time the menu was updated if you wanted to automate it more. It's all just math.
Could someone please work on the GigaMenu module and get a release out!
http://drupal.org/project/gigamenu
Thanks for showcasing our module. We're really glad it solved your use case. This is exactly the type of problem we were facing when we decided to create it.
Art, thanks for the mention, Randall and Mark did a great job strategizing the Menu Views Module, I'm sure we'll see it used in numerous places very soon!
Chris Sloan - Drupal Consultant
LevelTen Interactive
There is also the menu_minipanels module for create megamenus based on minipanels: http://drupal.org/project/menu_minipanels
@jason: GigaMenu seems to be another mega menu module that has very little activity on the D7 branch. I personally don't see the point either, when the css solution will turn regular Drupal menus into Mega Menus and can even be adapted to handle additional levels of menu hierarchy.
@Cristian Mamani: Excellent suggestion for those who use Panels already. We rarely if ever use Panels so I can't speak to how this module works, but it looks to be well maintained.
Thanks Art!
We are very pleased to see the community's response on this topic. With so many different ideas on how to accomplish this in Drupal, it was our goal to provide a simpler solution. Thanks again for the showcase!
I have been using it on a development Drupal 6 site and it works great.
The qTip jQuery library is rather out of date though and adds unnecessary inline CSS. It also doesn't apply a hover state to the main menu items.
The Drupal 7 module looks like it has had a bit of a rework and fixes at the very least the 'hover' issue.
Another solutions is to use the Superfish module. It can do simple mega menu's easily and is very active.
http://drupal.org/projects/superfish
@Ryan, I think your link is bad. Did you mean to link to this page?
http://drupal.org/project/superfish
Whoops! Thanks for pointing that out Amy, you are correct :)
Not a problem. A neat-looking module, too.
i want to know how can we create submenus using megamenu module...can u help me plzzzz....?
@R.Swarnarekha: I would recommend using another module like Menu Views
If you need help please check in the issue queue and/or login to IRC.
There's OM Maximenu module which looks very flexible. It's actively developed and already has a 2.0 version in developement which is Maximenu.
Would have been a more useful article if you'd explained how to create the Composite Mega Menu. Using the Whitehouse version as an example. Thanks.
Thanks for your thoughts, Miguel. Composite Mega Menus are a big topic, and so need their own post. We're planning to write something more specific in the future, but for now the LevelTen article linked in our post should give you a good introduction to them.
Anyone got examples of how to style the Menu View, as it now displays next to the menu. How to show the view only on menu item hover....
Thank you!
gh
Hey, even if someone could post a link of a site or demo site so I can sick fireBug on it....
thanks,
I created a mega menu for my site but while testing in on an ipad, I found that it doesn't function like the one on whitehouse.gov. The whitehouse.gov menu stays open when you touch the parent menu item. My parent menu items are linked to pages and so the mega drop down doesn't stay open long enough to select a child link. When I remove the links from the parent menu items, the mega menu drop down doesn't open up. Is there another module I need to either make this menu sticky or somehow substitute hover for focus on touch devices?
@Christina Can you explain which modules you are using to create the menu? Specifically, what module or method are you using to provide the drop down functionality?
Some methods and modules are known to work better with touch devices.
Jonathan, I tried several menu modules but in the end I used megamenus to edit my main menu. Since I am a Drupal newbie, I have been using Sweaver to do most of my CSS styling but have been able to work with my CSS.
I started out with the Clean Theme which come prebuilt with a superfish menu. Took me a while to get rid of that. The megamenu I am using is a menu block that I placed in the header region.
Does that help? I was thinking of trying menu_views and see if that works better.
@Christina While I have not used the megamenus module itself, I would highly recommend using Superfish to handle the the menu dropdown features and behavior. While it can be a bit overwhelming at first, I think you will find that it handles dropdown and touch behavior out of the box.
If your menus are just basic menus, then menu_views would be a bit much.
Actually we have a huge menu list and sort of complicated. People usually complain that they can't find what they are looking for because our current website has flyout menus that work similar to the superfish type. You really need to know what category to look in or just search through the numerous menu options to find specific pages. That is why we like the megamenu so much. Everything pops up at once and you don't have to have so many menu items.
I have heard of using superfish to create megamenus but don't understand how to do that. I guess I haven't found any good documentation on it.
Thanks for your quick responses by the way!
@Christina I agree that documentation on Superfish, and most menu stylization techniques in general, is severely lacking. The Superfish module, http://drupal.org/project/superfish, indicates that it has support for multi-column menus, however, I have not used it for that purpose and have been unable to find documentation on how to do that.
I will keep looking and see if I can find anything useful which might help.
Thanks! Superfish does work really well on ipads, any help or guidance will be greatly appreciated. In the meantime, I guess I will attempt to use menu views to show a mega menu.
@Christina You can see my very short write-up on how to accomplish this with Superfish at http://www.digett.com/blog/02/19/2013/superfish-mega-menus. Feel free to let me know if you have questions.
Can't figure out why I am not able to work with superfish module. I have installed it and removed it and reinstalled it. I placed the superfish library within my libraries folder. I just can't get to a menu to appear as a superfish anymore. I am using the Clean theme which came preinstalled with superfish and even then I couldn't configure the superfish because it was prebuilt into the theme. So I didn't have to install the module and didn't see it in my list of modules until I installed it. But even after installing it, I don't seem to have the option to create a superfish menu anywhere. Please... help...
Silly me, I didn't realize the superfish module creates disabled menu blocks.
@Christina Sounds like it may be working for you now. Let me know if it isn't or if you have any questions.
Superfish is working now. However, I'm not sure how to make it look like the Whitehouse.gov menu. I'm not talking about the colors but rather how the top navbar items open up a single box with all of the child menu items. My Superfish opens up several child menu items. Do you have any guidance with this?
@Christina From what I can find, it doesn't look like the whitehouse.gov menu is using Superfish. Additionally, they appear to be pulling in additional content which would involve some custom css and templating. A project I am currently working on simulates a menu using views and several template customizations to make it work with Superfish. Feel free to send a url to jonathan at digett dot com and I will see if I can make any suggestions.
Lightbulb moment - Megamenu can work on touchscreens with the latest version of jQuery and hoverIntent! Thanks for all your help on this. :D
I've been using couple of mega menu modules on drupal. While megamenu is under inactive developed (I couldn't get it work), the others such as menu minipanels, mucho menus... are complicated to new user like me, As far as I've been trying to test, Superfish works like a charm but it's limited in adding blocks to the menu. MD Mega Menu is nice too but I gotta pay for it. So our team decided to develop a new megamenu module at http://drupal.org/project/tb_megamenu. I believe you guys will find this module interesting, easy and highly flexible.
This post really helped me and save my lot of time.Thanks for share.
You're welcome, Naveen! Glad it was helpful.