ちょっと気になったので、作ってみた。
ハンバーガーアイコン -> ☓ボタン
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<nav class="toggle-menu">
<div class="menu-contents">
</div>
<div class="hum-icon">
<div class="hum"></div>
</div>
</nav>
<div class="main-contents">
<div class="nav-bar"></div>
</div>
<style>
html,body{
height: 100%;
margin: 0;
}
.toggle-menu{
display: block;
min-height: 100%;
width: 300px;
background-color: #E91E63;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
-webkit-transition:ease 0.5s;
transition:ease 0.5s;
z-index:9999;
}
.open{
-webkit-transform: translateX(0px);
transform: translateX(0px);
box-shadow:0px 0px 3px;
}
.hum-icon{
display:block;
height: 40px;
width: 40px;
position:fixed;
top:5px;
left:305px;
cursor: pointer;
-webkit-transition:ease 0.5s;
transition:ease 0.5s;
}
.open-icon{
-webkit-transform: translateX(-45px);
transform: translateX(-45px);
}
.hum{
display:block;
position: absolute;
top: 35%;
height: 2px;
width: 100%;
background-color: #555;
-webkit-transition:ease 0.3s;
transition:ease 0.3s;
}
.hum.cross-mark{
width: 0;
background-color: white;
}
.hum-icon:before{
content: '';
position: absolute;
top: 15%;
width: 100%;
height: 2px;
background-color: #555;
-webkit-transition:ease 0.5s;
transition:ease 0.5s;
}
.hum-icon.open-icon:before{
transform: rotate(-45deg);
background-color: white;
top: 45%;
}
.hum-icon:after{
content: '';
position: absolute;
top: 55%;
width: 100%;
height: 2px;
background-color: #555;
-webkit-transition:ease 0.5s;
transition:ease 0.5s;
}
.hum-icon.open-icon:after{
transform: rotate(45deg);
background-color: white;
top: 45%;
}
.nav-bar{
width: 100%;
height:40px;
box-shadow: 0px 0px 1px;
}
</style>
<script>
$(function(){
$('.hum-icon').click(function(){
$('.toggle-menu').toggleClass('open');
$(this).toggleClass('open-icon');
$('.hum,hum-icon').toggleClass('cross-mark');
});
});
</script>
</body>
</html>