Ich arbeite an E-Mail-Vorlagen, um sie für mobile Geräte reagieren, aber ich bin mir nicht sicher, wie ich Hamburger für Menü auf mobilen Geräten ohne js anzeigen kann.Wie können wir Hamburger für E-Mail-Vorlagen hinzufügen
Hier ist eine Methode, die ich auf Codepen gefunden habe. Testen Sie diesen Code wie immer in allen verfügbaren Geräten und verwenden Sie Medienabfragen, um auf verschiedene E-Mail-Clients zu zielen, wenn die Funktionalität auf Geräten gewünscht ist. Aus dem Blick auf den Code kann ich sagen, dass dies auf iOS (native E-Mail-Client) und Android 4.4 und darunter funktioniert.
Hinweis: Dies zeigt nicht Hamburger, aber Sie können die Auto-Details (mit Pfeil) mit einem Bild ändern, und es wird auf die gleiche Weise funktionieren.
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>
Mit CSS für Vorlagen, die von E-Mail-Dienste beschränkt ist. Um die Liste der CSS-Unterstützung für E-Mail-Dienstanbieter zu sehen, besuchen Sie diese Website: https://www.campaignmonitor.com/css/ – Jer
Aber gibt es eine Möglichkeit, wie wir Hamburger mit CSS hinzufügen können? –
@abdulwadood hat die folgende Antwort funktioniert für Sie? – Syfer