xxxxxxxxxx
/* <div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
*/
.hamburger {
display: inline-block;
cursor: pointer;
padding: 10px;
}
.hamburger span {
display: block;
height: 2px;
width: 25px;
margin-bottom: 5px;
background-color: #333;
transition: transform 0.3s ease;
}
.hamburger span:last-child {
margin-bottom: 0;
}
/* .active is added to the .hamburger element when it is clicked so
CSS to rotate and translate the lines of the icon to get X */
.hamburger.active span:first-child {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:last-child {
transform: rotate(-45deg) translate(5px, -5px);
}
xxxxxxxxxx
div {
content: "";
position: absolute;
left: 0;
display: block;
width: 14px;
top: 0;
height: 0;
-webkit-box-shadow: 1px 10px 1px 1px #69737d,1px 16px 1px 1px #69737d,1px 22px 1px 1px #69737d;
box-shadow: 0 10px 0 1px #69737d,0 16px 0 1px #69737d,0 22px 0 1px #69737d;
}
xxxxxxxxxx
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>