By Justin Khoo

The hamburger collapsible menu is pretty ubiquitous on mobile responsive websites these days. The hamburger menu allows navigation menus to be hidden when viewed on mobile devices. The menus are displayed when the user taps on an icon that consists of three fat horizontal lines that somewhat resembles a hamburger.

Jerry Martinez posted on the Litmus Community forum that he had implemented a version of the hamburger menu in emails. I thought it was so awesome that I just had to share it!

View Jerry’s example code on the Litmus Builder or the original version.

Using the Checkbox Technique

The hamburger button is wrapped with a label that targets a hidden checkbox using the “for” attribute. When the checkbox is toggled, the menu is displayed and hidden using the CSS3 :checked pseudo-class.

The checkbox technique is becoming increasingly popular with interactive email designs and you can see them used on this tabs for email example, this Litmus email and this email game.

Interesting Tricks

A few things I noticed about the example:

• The hamburger button was built completely in CSS! This removes any image dependency for this to work.
  
  
• The menu items are wrapped in their own table and are set to 100% width in mobile, allowing the menus to appear vertical.
  
  
• Conditional comments were used to wrap the responsive menu tables within table cells in Outlook 2007+. I’m interested in testing this out to see what effects this had on the design.
  
  
• CSS transitions to hide and show the menu made it look polished.

Discussion

I thought this is one of the best applications of an interactive email technique as the hamburger menu concept is not only simple but also very useful.

If you think this is cool and would like the join the discussion, head over to the Litmus community forum!