jQueryで動作する、ドロワーメニューのサンプルです。オーバーレイで全体を覆い、それをクリックしてもメニューが閉じる仕様です。
HTMLはこちらです。
<div class="container">
<header>
<h1>LOGO</h1>
<button type="button" class="sp-menubtn"><span></span><span></span><span></span></button>
</header>
<nav class="sp-menu">
<ul>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</nav>
<div class="overlay"></div>
</div>
続いて、cssはこちら。
header{
display:flex;
justify-content: space-between;
align-items: center;
height:80px;
}
h1{
font-size:30px;
padding-left:5%;
}
.container{
width: 100%;
height:100vh;
margin:0 auto;
position:relative;
}
.sp-menubtn{
width: 40px;
height: 40px;
position: relative;
border: none;
cursor: pointer;
background:none;
margin-right:50px;
z-index:10;
}
.sp-menubtn span{
display: block;
overflow: hidden;
white-space: nowrap;
text-indent: 100%;
width: 31px;
height: 3px;
background: #000;
position: absolute;
transition: 0.2s;
left: 50%;
top: 50%;
}
.sp-menubtn span:nth-child(1){
transform: translate(-50%, -13px);
}
.sp-menubtn span:nth-child(2){
transform: translate(-50%, -50%);
}
.sp-menubtn span:nth-child(3){
transform: translate(-50%, 10px);
}
.sp-menubtn .active span{
width: 35px;
height: 3px;
}
.sp-menubtn.active span:nth-child(1){
transform: translate(-50%, 50%) rotate(45deg);
background:#fff;
}
.sp-menubtn.active span:nth-child(2){
opacity: 0;
left: 50%;
}
.sp-menubtn.active span:nth-child(3){
transform: translate(-50%, 50%) rotate(-45deg);
background:#fff;
}
.overlay {
content: "";
display: block;
width: 0;
height: 0;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
z-index: 8;
opacity: 0;
transition: opacity .5s;
}
.overlay.open {
width: 100%;
height: 100%;
opacity: 1;
}
.sp-menu {
display:block;
width: 270px;
height: 100%;
background:#9ed0e9;
position: fixed;
top: 0;
right: 0;
z-index: 9;
transform: translate(270px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
}
.sp-menu.open {
transform: translateZ(0);
}
.sp-menu li{
list-style: none;
border-bottom:1px dotted rgba(255,255,255,0.4);
}
.sp-menu li:first-child{
padding-top:80px;
}
.sp-menu li:last-child{
border-bottom: none;
}
.sp-menu li a{
display:block;
padding:10px;
color:#fff;
font-size:14px;
text-decoration: none;
}
.sp-menu li a:hover{
background:rgba(255,255,255,0.2);
}
最後に、jsはこちら。
$(function(){
$('.sp-menubtn').on('click',function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
$('.sp-menu').removeClass('open');
$('.overlay').removeClass('open');
} else {
$(this).addClass('active');
$('.sp-menu').addClass('open');
$('.overlay').addClass('open');
}
});
$('.overlay').on('click',function(){
if($(this).hasClass('open')){
$(this).removeClass('open');
$('.sp-menubtn').removeClass('active');
$('.sp-menu').removeClass('open');
}
});
});
ドロワーメニュー自体のオン・オフの切り替えだけなら、toggleClassを使えばいいですが、overlayをクリックした場合の動作も加えたかったので、こうなっています。
以上です。