<html>
<head>
<title>Hamburger Icon</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
body{
height: 100%;
background: #F8F8F8;
}
.menu{
width: 24px;
height: 20px;
cursor: pointer;
-webkit-transition: .1s ease-in-out;
transition: .1s ease-in-out;
-webkit-transform: rotate(0);
transform: rotate(0);
margin: 50px auto;
}
.menu span{
width: 24px;
height: 2px;
position: absolute;
left: 0;
display: block;
background: #CFAF8F;
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.menu span:nth-child(1){
top: 0;
}
.menu span:nth-child(2),
.menu span:nth-child(3){
top: 6px;
}
.menu span:nth-child(4){
top: 12px;
}
/* open-close effects */
.menu.open span:nth-child(1),
.menu.open span:nth-child(4){
display: none;
}
.menu.open span:nth-child(2){
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.open span:nth-child(3){
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="menu">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<script>
$(document).ready(function() {
$(".menu").click(function(){
$(this).toggleClass("open");
});
});
</script>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.