ハンバーガーメニュー

メモです！！

探すのめんどくさいので。。

HTMLとCSSのみで実装可能

HTML

<div class="hamburger-box">
<a class="btn"></a>
<div class="drawr">
<ul id="menu">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
</div>
</div>

CSS

.btn {
background:transparent url(../images/top/menu_icon.png) no-repeat 0 0;
display: block;
width:80px;
height: 80px;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
z-index: 200;
}

.peke {
background-position: 0px 0;
}

.drawr {
display: none;
background-color:rgba(0,0,0,0.8);
position: absolute;
top: 0px;
right:0px;
width:260px;
padding:80px 0 20px 20px;
z-index: 100;
}

#menu li {
width:260px;
}

#menu li a {
color:#fff;
display: block;
padding: 15px;
text-align: left;
}