Mega Menu Whitehouse.gov

Revisited: Mega Menus in Drupal 7

Posted by Art Williams on January 25, 2012

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.

  1. Total number of menu items:   24   
  2. Total number of columns:    3   
  3. Divide #1 by #2 for the number of items in each column:    8    (Round up to the nearest whole number.)
  4. Desired Width per column:    155px   
  5. Desired Height per item:    18px   
  6. Multiply #2 by #4 for the total width of the dropdown box:    465px   
  7. 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

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

Plain text

  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
Submitted by Nate on Wed, 01/25/2012 - 2:17pm

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.

Submitted by Art Williams on Wed, 01/25/2012 - 2:27pm

@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.

Submitted by Randall Knutson on Wed, 01/25/2012 - 10:18pm

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.

Submitted by Chris Sloan on Thu, 01/26/2012 - 9:16am

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

Submitted by Art Williams on Mon, 01/30/2012 - 9:00am

@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.

Submitted by Mark Carver on Fri, 02/03/2012 - 8:04am

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!

Submitted by James on Tue, 02/14/2012 - 10:14am

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.

Submitted by Ryan Armstrong on Tue, 02/28/2012 - 6:25pm

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

Submitted by Ryan Armstrong on Wed, 02/29/2012 - 10:57am

Whoops! Thanks for pointing that out Amy, you are correct :)

Submitted by Amy Peveto on Wed, 02/29/2012 - 10:59am

Not a problem. A neat-looking module, too.

Submitted by R.Swarnarekha on Fri, 03/09/2012 - 3:56am

i want to know how can we create submenus using megamenu module...can u help me plzzzz....?

Submitted by Art Williams on Fri, 03/09/2012 - 11:18am

@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.

Submitted by philipz on Sat, 03/31/2012 - 6:13am

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.

Submitted by Miguel Perez on Tue, 09/25/2012 - 3:57am

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.

Submitted by Amy Peveto on Tue, 09/25/2012 - 11:03am

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.

Submitted by Guy Hilsman on Mon, 10/01/2012 - 12:02pm

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

Submitted by Guy Hilsman on Mon, 10/01/2012 - 7:52pm

Hey, even if someone could post a link of a site or demo site so I can sick fireBug on it....
thanks,

Submitted by Christina Dillabough on Wed, 02/06/2013 - 5:15pm

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?

Submitted by Jonathan Dale on Thu, 02/07/2013 - 10:05am

@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.

Submitted by Christina Dillabough on Thu, 02/07/2013 - 10:28am

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.

Submitted by Jonathan Dale on Thu, 02/07/2013 - 10:41am

@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.

Submitted by Christina Dillabough on Thu, 02/07/2013 - 11:25am

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!

Submitted by Jonathan Dale on Thu, 02/07/2013 - 11:59am

@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.

Submitted by Christina Dillabough on Thu, 02/07/2013 - 12:11pm

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.

Submitted by Christina Dillabough on Wed, 02/20/2013 - 12:11pm

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...

Submitted by Christina Dillabough on Wed, 02/20/2013 - 12:41pm

Silly me, I didn't realize the superfish module creates disabled menu blocks.

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

@Christina Sounds like it may be working for you now. Let me know if it isn't or if you have any questions.

Submitted by Christina Dillabough on Thu, 02/21/2013 - 9:38am

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?

Submitted by Jonathan Dale on Thu, 02/21/2013 - 10:08am

@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.

Submitted by Christina Dillabough on Thu, 02/21/2013 - 3:53pm

Lightbulb moment - Megamenu can work on touchscreens with the latest version of jQuery and hoverIntent! Thanks for all your help on this. :D

Submitted by Christopher Vee on Fri, 06/07/2013 - 10:51pm

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.

Submitted by Naveen Valecha on Wed, 06/19/2013 - 4:47am

This post really helped me and save my lot of time.Thanks for share.

Submitted by Amy Peveto on Wed, 06/19/2013 - 7:56am

You're welcome, Naveen! Glad it was helpful.