‘Hamburger’ Collapsible Menu in Email

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!

hamburger-animated
View Jerry’s example code.

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.

A simplified version looks like this:

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.

Here’s a technique to hide checkboxes from all the email clients.

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.


Check out the hybrid hamburger menu example that uses :hover when checkboxes are not supported (ie. with MailChimp).


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!




Latest Comments
  1. Jerry Martinez

    Thanks for blogging about this.

    The menu options were marked up using table siblings having the align attribute. This is due to the fact that Android kitkat dropped support for display:block on TD elements which would kick in for mobile views. This didn’t sit well with Outlook Desktop so I had to hack in the TD elements. This is completely unrelated to the Hamburger implementation.

    • Justin

      Hi Jerry,
      Thanks for the background on the Outlook TD hack. Great work on the hamburger menu implementation!
      – Justin

  2. Elaine Wood

    I’ve tried this on an airline client in their responsive design and it seem to take a while for it take off (sorry for the pun!). People are used to seeing it on website so it should start to become a well recognised function symbol. The great thing was that as their nav bar was so big in the desktop but had a high click rate, we were still able to include a menu list for mobile. Its really impressive to show clients! It takes a while to get your head round the branding and alignment though.

    • Shi Li

      Dear Elaine Wood
      Love to know more details about your airline client’s feedback if you can message me, shi at seatassignmate dot com

  3. Dave

    I looked into this about 12months ago the issue with this technique is the fact many email senders will strip out any kind of form tag. I found a way to do the same thing using just active and focus pseudo classes. Even worked in windows mobile :)

    • Justin

      That’s awesome! Would love to see an example. Perhaps you could share it with the Litmus Community too?

  4. Neil G

    I’ve tried sending the email shown and it does not work on the default iOS mail client or the default Android client. I copied the source markup from Litmus Builder and pasting it into a message composed on my Mandrill account. Can anyone verify that this actually works? As far as I can tell it’s bullshit.

    • Justin

      Hey Neil, I can verify that it definitely works in the native iOS client :) Try pasting the code on putsmail.com and make sure the inlining option is not checked.

  5. Caddis Ray

    Thanks for such a useful post! The only issue I have now is while sending from Mailchimp, this service deletes tags and after saving the template. I’d appreciate if you could provide for the solution of this problem. Maybe there is the way to save these tags somehow? Thank you in advance.

  6. Keith

    This is great! Though the logo and links seem to not display in Outlook.com/Hotmail, any thoughts on this?

    Thanks!

  7. Danielle Boenisch

    Nordstrom and REI use this on all of their emails as an example of the usage.

  8. Olu

    This is pretty cool, thank you. One question though. If I don’t want to use the hamburger and just want to automatically display the mobile menu with no click, how do I go about that?
    Many thanks.

    • Olu

      Figured it out :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">