{"id":1318,"date":"2015-01-20T18:32:17","date_gmt":"2015-01-20T18:32:17","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=1318"},"modified":"2016-08-17T21:48:44","modified_gmt":"2016-08-17T21:48:44","slug":"hamburger-collapsible-menu-in-email","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/hamburger-collapsible-menu-in-email\/","title":{"rendered":"‘Hamburger’ Collapsible Menu in Email"},"content":{"rendered":"

The hamburger collapsible menu<\/a> 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.<\/p>\n

Jerry Martinez<\/a> posted on the Litmus Community forum<\/a> 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!

<\/p>\n

\"hamburger-animated\"<\/a>
\nView Jerry\u2019s example code<\/a>.

<\/p>\n

Using the Checkbox Technique<\/h4>\n

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.<\/p>\n

A simplified version looks like this:<\/p>\n

<style>\r\n#hidden-checkbox:checked + div #menu{\r\n  ... css to display menu ...\r\n}\r\n<\/style>\r\n<input id=\"hidden-checkbox\" type=\"checkbox\">\r\n<div>\r\n  <label for=\"hidden-checkbox\">Hamburger Button<\/label>\r\n  <div id=\"menu\">Menu Content...<\/div>\r\n<\/div><\/pre>\n
The checkbox technique is becoming increasingly popular with interactive email designs and you can see them used on this tabs for email example<\/a>, this Litmus email<\/a> and this email game<\/a>.<\/p>\n
Here’s a technique to hide checkboxes<\/a> from all the email clients.

<\/p>\n
Interesting Tricks<\/h4>\n
A few things I noticed about the example:<\/p>\n