A dispatch from the Wild West of email.
Over the weekend I was thinking about a discussion I had with my Art Director Jim Kelley about using the kinetic Hamburger menu functionality to mimic a selectable dropdown element within email.
It took a bit of wrangling but the attached basic test seems to work. Normal caveats apply for new kinetic code… only tested lightly on my iPhone 6 (iOS10), no desktop fallback etc.
The key in this case was the arrangement of form and reset elements so that result of the label triggers are reversed after the first time the element is expanded.
In this test, I included a CTA whose link changes based on the selected option.
It would also be possible to include a second dropdown, and then the CTA would reflect the combination of the two values (9 permutations).
Other uses of this feature might be
a) Creation of in-email form (that doesnt cause the warning popup like a standard form control)
b) Toggle between different versions of the email; e.g. English / Spanish / French translations, or Male / Female targeted content. Or, a time of day email can be recoded so that all 3 versions are included and the user can toggle between them via the control.
Tags: CSS, email, kinetic