|
<html> |
|
<head> |
|
<style> |
|
.menu-icon { |
|
padding: 5px; |
|
width: 30px; |
|
height: 30px; |
|
cursor: pointer; |
|
text-align: center; |
|
} |
|
.menu-icon > span { |
|
display: block; |
|
margin-top: 4px; |
|
border-top: 2px solid #666; |
|
position: relative; |
|
-webkit-transition: all 0.2s cubic-bezier(.15,1.43,.46,1.25); |
|
transition: all 0.2s cubic-bezier(.15,1.43,.46,1.25); |
|
margin: inherit auto; |
|
} |
|
.menu-icon:hover > span { |
|
border-top: 2px solid #333; |
|
} |
|
.menu-icon.active > .ln-one { |
|
-webkit-transform-origin: top left; |
|
-webkit-transform: rotate(45deg); |
|
-ms-transform-origin: top left; |
|
-ms-transform: rotate(45deg); |
|
transform-origin: top left; |
|
transform: rotate(45deg); |
|
} |
|
.menu-icon.active > .ln-two { |
|
border-color: transparent; |
|
} |
|
.menu-icon.active > .ln-three { |
|
-webkit-transform-origin: left bottom; |
|
-webkit-transform: rotate(-45deg) translateY(6px) translateX(-6px); |
|
-ms-transform-origin: left bottom; |
|
-ms-transform: rotate(-45deg) translateY(6px) translateX(-6px); |
|
transform-origin: left bottom; |
|
transform: rotate(-45deg) translateY(6px) translateX(-6px); |
|
} |
|
</style> |
|
<script> |
|
window.onload = function(){ |
|
document.querySelector('.menu-icon').addEventListener('click',function(){ |
|
this.classList.toggle('active'); //classList isn't supported in IE9 |
|
//for IE9 support, use jQuery's toggleClass() method |
|
}); |
|
}; |
|
</script> |
|
</head> |
|
<body> |
|
<div class="menu-icon"> |
|
<span class="ln-one"></span> |
|
<span class="ln-two"></span> |
|
<span class="ln-three"></span> |
|
</div> |
|
</body> |
|
</html> |
