Responsive Style Menu for HTML e-mail

Developer
Chris
Size
2,441 Kb
Views
26,312
  1. Responsive Style Menu for HTML e-mail Previews
  2. Responsive Style Menu for HTML e-mail HTML Codes
  3. Responsive Style Menu for HTML e-mail CSS Codes

How do I make an responsive style menu for html e-mail?

Many newer e-mail clients have better CSS support. This menu is adapted from a checkbox, essentially does a show and hide effect. For the user they get an interactive menu within e-mail!. What is a responsive style menu for html e-mail? How do you make a responsive style menu for html e-mail? This script and codes were developed by Chris on 21 August 2022, Sunday.

Responsive Style Menu for HTML e-mail Previews
IQ Test

Responsive Style Menu for HTML e-mail - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Style Menu for HTML e-mail</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--Adatped from http://blog.lyris.com/average-responsive-email-design/-->
<div class="menu-dropdown" > <input id="button" style="position: absolute; top: -9999px; left: -9999px;" type="checkbox" /> <label for="button" style="display:none;">Menu</label> <ul class="nav"> <li style="color:#FFF"> <a href="#" name="Home" title="Meun item one" style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; width: 95%; height: 40px; line-height: 40px; float: left; cursor: pointer; background-color: #F4F3F1; padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; border-top: 5px solid #166dac; ;">Home</a></li> <li style="color:#FFF"> <a href="#" name="About" title="Menu item two" style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; width: 95%; height: 40px; line-height: 40px; float: left; cursor: pointer; background-color: #F4F3F1; padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; border-top: 5px solid #166dac;">About</a></li> <li class="account-item" style="color:#FFF"> <a href="#" name="Products" title="Menu item three" style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; width: 95%; height: 40px; line-height: 40px; float: left; cursor: pointer; background-color: #F4F3F1; padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; border-top: 5px solid #166dac;">Products</a></li> </ul>
</div>
</body>
</html>

Responsive Style Menu for HTML e-mail - Script Codes CSS Codes

div[class=menu-dropdown] a, div[class=menu-dropdown] label {	color: #383738;	text-decoration: none;	font-size: 14px;	font-weight: bold;	width: 60px;	text-align: left !important;
}
div[class=menu-dropdown] ul {	padding: 0;	margin: 0 auto;	width: 150px;	list-style: none;
}
div[class=menu-dropdown] ul {	display: none;	height: 100%;
}
div[class=menu-dropdown] label {
position: absolute;
display: block !important;
width: 80px;
min-height: 20px;
color: #383738;
cursor: pointer;
padding: 10px;
background-color: #EEEEEE;
font-family: arial;
margin: 0px;
padding: 10px;
}
/* Responsive menu*/
div[class=menu-dropdown] label:after {
position: absolute;
content: "\2261";
font-size: 2.5em;
padding: 0px;
margin: -10px 0px 0px 20px;
}
div[class=menu-dropdown] input[type=checkbox]:checked ~ label:after {	color: #383738;
}
div[class=menu-dropdown] input[type=checkbox]:checked ~ ul {	display: block;	position: absolute;	top: 42px;
}
div[class=menu-dropdown] input[type=checkbox]:checked ~ ul > li {	width: 100%;
}
div[class=menu-dropdown] input[type=checkbox]:checked ~ ul > li .ball {	float:left;	margin:5px 5px 0px 0px;	height: 30px;	width: 30px;
}
div[class=menu-dropdown] input[type=checkbox]:checked ~ ul > li a {	display: block;
}
div[class=menu-dropdown] input[type=checkbox]:checked ~ ul > li a:hover {	text-decoration:underline;
}
div[class=menu-dropdown] input[type=checkbox]:checked ~ ul > li.account-item {	background-color: #11b5e9;	color: #fff;
}
div[class=menu-dropdown] input[type=checkbox]:checked ~ ul > li.account-item a {	color: #383738;
}
*[class="bottom-padding"] {	padding: 0px 0 10px 0 !important;
}
*[class="small-text"] {	font-size: 12px!important;
}
Responsive Style Menu for HTML e-mail - Script Codes
Responsive Style Menu for HTML e-mail - Script Codes
Home Page Home
Developer Chris
Username onlinechris
Uploaded August 21, 2022
Rating 3
Size 2,441 Kb
Views 26,312
Do you need developer help for Responsive Style Menu for HTML e-mail?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris (onlinechris) Script Codes
Name
Menu icon, animated upon open and close.
IPhone5S SVG Space Grey
Ripple Effect Material Design
Animated CSS3 mail mascot
Calendar Animation 2
Twitter SVG icon
Animated CSS3 gradient button for e-mail
Calendar Animation
Play to Pause, material design style
Animated Hamburger Menu Icon with Material Design Open Transition
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!