Question

我正在研究电子邮件模板以使其对移动设备做出响应，但我不确定如何在不使用js的情况下在移动设备上显示汉堡菜单。

Answer 1

这是我在codepen上找到的方法。一如既往地在所有可用设备中测试此代码，并使用媒体查询来定位不同的电子邮件客户端（如果功能是您想要的设备）。从查看代码我可以说这适用于iOS（本机电子邮件客户端）和Android 4.4及以下版本。

注意：这不显示汉堡包，但您可以使用图片更改车辆详细信息（带箭头），它将以相同的方式工作。

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>

来源：https://codepen.io/geoff_phillips3/pen/YyOwQq

我们如何为电子邮件模板添加汉堡包

1 个答案: