positionによってメニューがスライドしてくるタイプのハンバーガー
<div id="humberger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<ul id="drawernav">
<li><a href="#test">メニュー</a></li>
<li><a href="#test">メニュー</a></li>
<li><a href="#test">メニュー</a></li>
<li><a href="#test">メニュー</a></li>
</ul>
header {
position: fixed;
width: 100%;
z-index: 5;
}
#humberger {
width: 50px;
height: 30px;
background-color: #050e3e;
float: right;
padding-top: 10px;
transition: .3s;
}
#drawernav{
position: fixed;
top: -1500px;
width: 100%;
height: 1000px;
background-color: rgba(5,14,62,0.8);;
color: #fff;
z-index: -2;
padding-top: 40px;
transition: .3s;
text-align: center;
}
#drawernav li a {
color: #fff;
display: block;
}
#drawernav li {
color: #fff;
}
li.toplink a {
width: 100%;
}
.drawer-opened #drawernav{
top: 0;
}
.icon-bar {
width: 40px;
height: 2px;
margin: 0 auto 7px;
display: block;
background-color: #fff;
transition: .3s;
}
.drawer-opened #humberger {
background-color: #fff;
}
.drawer-opened #humberger .icon-bar{
background: #050e3e;
}
.drawer-opened #humberger :nth-child(1){
transform:translate(0,8px) rotate(45deg);
-webkit-transform:translate(0,8px) rotate(45deg);
}
.drawer-opened #humberger :nth-child(2){
transform:translate(-20px ,0);
-webkit-transform:translate(-20px ,0);
opacity:0;
}
.drawer-opened #humberger :nth-child(3){
transform:translate(0,-8px) rotate(-45deg);
-webkit-transform:translate(0,-8px) rotate(-45deg);
}
.main_contents {
padding: 40px 0 0 0;
height: 1000px;
}
$(function(){
$("#humberger").on("click", function() {
$("body").toggleClass("drawer-opened");//追加部分
});
});