TechQA.

How we can add hamburger for email templates

410 views Asked by At

I am working on email templates to make them responsive for mobile devices but i am not sure how i can show hamburger for menu on mobile devices without using js.

email email-templates
Original Q&A
1

There are 1 answers

0
Syfer On

Here is a method i found on codepen. As always test this code in all available devices and use media queries to target different email clients if the functionality is what you want on devices. From looking at the code i can say this works on iOS (native email client) and Android 4.4 and below.

Note: This is not showing hamburger but you can change the Car Details (with arrow) with an image and it will work the same way.

input {display:none;}

        @media (max-width:480px) {
            #expandable_container1 {
                position:relative;
                max-width:263px;
                text-align:center;
            }

            #details_container1 {
                position:relative;
                overflow:hidden;
            }

            #expandable_container1 td {
                width: 100%;
                border-bottom:2px solid #ffffff;
                height:18px;
                padding: 10px 0px;
            }

            #expandable_container1 table {
                margin-top:-500px;
                -ms-transition: margin-top .5s ease-in-out;
                -webkit-transition: margin-top .5s ease-in-out;
            }

            #exp_checkbox1:checked + table {
                margin-top:0%;
            }

            .nav-over,.nav-under {
                display:block !important;
                max-height:none !important;
                padding-top:3px;
                padding-bottom:3px;
            }

            .nav-over img,.nav-under img {
                display:block;
                float:right;
                margin-right:5px;
            }

            .nav-over{
                -ms-transition-delay: 1.5s;
                -webkit-transition-delay: 1.5s;                
            }

            #expandable_container1 > .nav-over:hover + div table{
                margin-top:0% !important;
            }

            #expandable_container1 > .nav-over:hover{
                visibility:hidden;
            }
        }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--[if !mso]><!-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <p style="font-size:30px">This is the header.</p>
    <img src="https://www.emailonacid.com/images/emails/auto_template/car_1.jpg" alt="CAR NAME" width="263" height="158" border="0" align="top" style="display:block; border:solid 1px #cccccc;" />
          <div id="expandable_container1">
            <!--[if !mso 9]><!-->
            <label for="exp_checkbox1">
                <div class="nav-under" style="display:none;overflow:hidden;max-height:0px;text-align:center;background-color:#3b5369;color: #ffffff;">
                    Car Details ▼
                </div>
                <div class="nav-over" style="display:none;overflow:hidden;max-height:0px;text-align:center;position:absolute;top:0px;width:100%;opacity:0;color: #ffffff;">
                    Car Details ▼
                </div>
            </label>
            <!--<![endif]-->
            <div id="details_container1">
                <!--[if !mso 9]><!--><input id="exp_checkbox1" type="checkbox" style="display:none !important;"><!--<![endif]-->
                <table cellspacing="0" cellpadding="0" border="0" width="263" style="width:263px">
                    <tr>
                        <td height="25" align="center" valign="center" bgcolor="#DBDBDB">
                            <span class="info_item">2013 Nissan Z</span>
                        </td>
                    </tr>
                    <tr>
                        <td height="25" align="center" bgcolor="#DBDBDB">
                            <span class="info_item">22,000 Miles</span>
                        </td>
                    </tr>
                    <tr>
                        <td height="25" align="center" bgcolor="#DBDBDB">
                            <span class="info_item">2 Year Limited Warranty</span>
                        </td>
                    </tr>
                    <tr>
                        <td height="25" align="center" bgcolor="#DBDBDB">
                            <span class="info_item">Lease for $200 a month</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    <p>This is the body of the email.</p>
</body>
</html>

Source: https://codepen.io/geoff_phillips3/pen/YyOwQq

Related Questions in EMAIL

Related Questions in EMAIL-TEMPLATES

Popular Questions

Trending Questions