ハンバーガーメニューの実装
Share
こんなことを説明しています！
- 上からスライドして出てくるハンバーガーメニューの作り方
- メニュー開閉時に背景にあるテキストを固定する方法
- SP版からPC版に画面幅を変更した時に自動でメニィーを閉じるようにする方法
解説動画
コードの解説
HTML の記述
<header class="header">
<div class="logo"><a href="">ロゴ</a></div>
<div class="drawer-icon">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
</div>
</header>
<div class="drawer-menu">
<ul class="drawer-list">
<li class="drawer-item"><a href="#">item1</a></li>
<li class="drawer-item"><a href="#">item2</a></li>
<li class="drawer-item"><a href="#">item3</a></li>
<li class="drawer-item"><a href="#">item4</a></li>
</ul>
</div>
<div class="drawer-bg"></div>
手順
▶︎ 背景の drawer-bg を drawer-menu の外側に出す！！
背景を押したときに js-open クラスを外すようにしたいので、drawer-menu に背景をつけてしまうと、「メニューを押す」と「背景を押す」の分離ができなくなってしまう。
css の記述
.drawer-menu {
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: auto;
transform: translateY(-100%);
transition: all 0.3s ease;
&.js-open {
transform: translateY(0);
}
}
.drawer-list {
background: #18eb49;
padding: 130px 40px 40px;
}
.drawer-bg {
position: fixed;
z-index: 98;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(#000, 0.7);
display: none;
transition: all 0.3s ease;
&.js-open {
display: block;
}
}
body.no-scroll {
overflow: hidden;
}
手順① ( drawer-menu )
▶︎ headerの上に隠しておく ( transform: translateY(-100%); )
▶︎ js-open クラスがついたら 0.3秒で ( transition: 0.3s; )
▶︎ headerの下に来るように実装 ( transform: translateY(0); )
手順② ( drawer-menu と drawer-bg の関係 )
▶︎ drawer-menu と drawer-bg は別物として考えて z-indexをmenuが上になるように設定する。
手順③ ( テキストがスクロールしないように )
▶︎ body タグに overflow: hidden; をつけるとスクロールしなくなるので、body に no-scroll クラスがついたときに それが実行されるように設定しておく。
jQuery の記述
jQuery(function($){
//ドロワーアイコン
$('.drawer-icon').on('click', function () {
$(this).toggleClass('js-open');
$('.drawer-menu').toggleClass('js-open');
$('.drawer-bg').toggleClass('js-open');
$('body').toggleClass('no-scroll');
return false;
});
//背景
$('.drawer-bg').on('click', function () {
$(this).removeClass('js-open');
$('.drawer-menu').removeClass('js-open');
$('.drawer-icon').removeClass('js-open');
$('body').removeClass('no-scroll');
return false;
});
//リンク
$('.drawer-item a').on('click', function () {
$('.drawer-bg').removeClass('js-open');
$('.drawer-menu').removeClass('js-open');
$('.drawer-icon').removeClass('js-open');
$('body').removeClass('no-scroll');
return false;
});
//画面幅を広げたら自動で閉じるように
$(window).resize(function(){
var windowWidth = $(window).width(); //画面幅
var pointWidth = 767; //切り替える画面幅 - 1
if (pointWidth < windowWidth ) {
//画面幅がpointWidth以上のときの処理を書く
$('.drawer-bg').removeClass('js-open');
$('.drawer-menu').removeClass('js-open');
$('.drawer-icon').removeClass('js-open');
$('body').removeClass('no-scroll');
return false;
}
});
});
手順①
▶︎ 「アイコン」「メニュー」「背景」「スクロール」の４つに対して class のつけ外しを行う
※ 『「ドロワーを開く」= 「 js-open がついている状態」』 で統一しておくとわかりやすり
手順② ( resizeの設定 )
SP版のみでドロワーメニューを作る場合は、SP版の画面幅からPC版の画面幅に切り替えた際に、PC版のヘッダーに直る必要があります。これをしておかないと、ドロワーが閉じなくなってしまうことがあります...
解説で使用したスニペット
vs code へのスニペットの登録方法はこちらを参照ください！
scss.json
"top50": {
"prefix": "top-50%",
"body": [
"top: 50%;",
"transform: translateY(-50%);",
],
"description": ""
},
"left50": {
"prefix": "left-50%",
"body": [
"left: 50%;",
"transform: translateX(-50%);",
],
"description": ""
},javascript.json
"resize": {
"prefix": "resize",
"body": [
"\\$(window).resize(function(){",
" var windowWidth = $(window).width(); //画面幅",
" var pointWidth = 767; //切り替える画面幅 - 1",
" if (pointWidth < windowWidth ) {",
" //画面幅がpointWidth以上のときの処理を書く",
" $1",
" }",
"});",
],
"description": ""
},
"click": {
"prefix": "click",
"body": [
"\\$('$1').on('click', function () {",
" $2",
" return false;",
"});",
],
"description": ""
},