スライドメニューを作ってみよう！
スライドメニュー
※この画面左上の三本線（ハンバーガーアイコン）をクリックすると、メニュー画面が表示されます。
コード（Codepen）
コードはこちらから見ることができます。
See the Pen Untitled by Shin (@shin-ichi) on CodePen.
解説
【HTML解説】
HTMLの解説は、上記codepenのHTML部分に解説を載せてあります。「メニューを開くボタン」「メニューを閉じるボタン」「メニューのリスト」をHTMLであらかじめ作っておきます。
【CSS解説】
CSSは一行ずつ解説しています。
/*スライドメニューボタン*/
.btn-menu{
position: fixed; /*画面に固定表示するCSS。スクロールしても動かない。*/
left: 5px; /*左から5pxの位置*/
top: 5px; /*上から5pxの位置*/
color: #ff6347; /*文字色をトマト色にする。*/
background: #ff6347; /*背景色をトマト色にする。*/
width: 50px; /*ボタンのサイズ（幅）を50pxにする*/
height: 50px; /*ボタンのサイズ（高さ）を50pxにする*/
cursor: pointer; /*マウスを乗せると指マークになります。*/
border: 1px solid #ffffff; /*ボタンの周りに白線を描きます*/
border-radius: 50%; /*円形にします*/
transition: 0.4s; /*0.4秒かけてアニメーションを実行します。*/
}
/*マウスを乗せた時の動作*/
.btn-menu:hover{
opacity:0.6; /*少し透明にします。*/
transition:0.3s; /*0.3秒かけてアニメーションします。*/
}
/*ハンバーガーアイコン画像のCSS（開くボタン）*/
.humberger-img{
width: 40%; /*ボタンの40%のサイズにします。*/
height: auto;
transform: translateY(1px); /*1px下へ移動。位置微調整です。*/
}
/*×ボタン（閉じるボタンのCSS）*/
#menu-close{
z-index: 9999; /*閉じるボタンを最前面にします。*/
}
/*スライドメニュー全体のCSSです。*/
.menu-container{
position: fixed; /*メニュー画面を固定します。*/
top: 0; /*上0pxの位置に固定します。*/
left: -300px; /*左-300pxの位置に固定します。*/
width: 300px; /*幅を300pxにします。*/
height: 100vh; /*高さを1画面分にします。*/
background: #efefef; /*背景を指定します。*/
translate: 0 0; /*左から現れる（x軸0 y軸0）CSSです*/
transition: translate .4s; /*translate変更時に0.4秒かけてアニメーション。*/
z-index: 9997;
}
/*リスト全体のCSSです。*/
.menu{
list-style: none; /*黒丸を消します。*/
padding-top: 5rem; /*上に余白を作ります。*/
text-align: center; /*文字を中央寄せします。*/
margin-right: 3rem; /*右に余白を作ります。*/
}
/*リンク文字のCSS*/
.menu a{
color: #ff6347; /*文字色をトマト色にします。*/
display: block; /*リンク全体を押せるようにします。*/
padding: 0.5rem; /*余白を作ります。*/
font-size: 1.5rem; /*フォントサイズを指定します。*/
text-decoration: none; /*下線を削除します。*/
}
/*リンク文字にマウスが乗った時のCSS*/
.menu a:hover{
opacity: 0.6; /*半透明になります。*/
transition: 0.4s; /*0.4秒かけて半透明になります。*/
}
/*メニューボタンが押された時にこのCSSを付与することによって300pxスライドします。*/
.panel-open{
translate: 300px; /*左へ300px移動します。（スライドします。）*/
}
/*スライドメニューオープン時の黒い透明マスク部分のCSS*/
.menu-mask{
position: fixed; /*画面を固定します*/
top:0; /*上0pxの位置に固定します。*/
left: 0; /*左0pxの位置に固定します。*/
width: 100vw; /*ウィンドウの幅にします。*/
height: 100%; /*縦方向いっぱいにします。*/
background-color: #000000; /*背景色を黒にします*/
opacity: 0; /*最初は透明になっています。*/
visibility: hidden; /*最初は見えません。*/
z-index: 9996; /*重なりを指定します。*/
}
/*スライドメニューオープン時の黒い透明マスク部分を表示させるCSS*/
.mask-visible{
opacity: 0.6; /*半透明にします。*/
visibility: visible; /*表示します。*/
z-index: 9996; /*重なりを指定します*/
transition: 0.4s; /*0.4秒かけてアニメーションします。*/
}
【JavaScript解説】
スライドメニューと半透明黒背景にあらかじめ作っておいた表示用のクラス（「menu-open」クラスと「mask-visibleクラス」を付けたり外したりして表示と非表示を切り替えています。）
/*スライドメニュー（左から現れるメニュー）*/
const btnOpen = document.querySelector('#menu-open'); /*開くボタンを取得します。*/
const btnClose = document.querySelector('#menu-close'); /*閉じるボタンを取得します。*/
const menuPanel = document.querySelector('.menu-container'); /*メニュー本体を取得します。*/
const menuMask = document.querySelector('.menu-mask'); /*黒背景を取得します。*/
/*開くボタンをクリックした時の動作*/
btnOpen.addEventListener('click',()=>{
menuPanel.classList.add('panel-open'); /*あらかじめ作っておいたpanel-openクラスをメニュー本体に付与し、表示します。（300px移動させて画面に表示します。）*/
menuMask.classList.add('mask-visible'); /*非表示になっている黒半透明背景にmask-visibleクラスを付与して表示します。*/
});
/*閉じるボタンをクリックした時の動作*/
btnClose.addEventListener('click',()=>{
menuPanel.classList.remove('panel-open'); /*panel-openクラスを取り除き、メニュー本体を非表示にします。*/
menuMask.classList.remove('mask-visible'); /*mask-visibleクラスを取り除き、黒半透明背景を非表示にします。*/
});
/*半透明黒背景をクリックした時の動作*/
menuMask.addEventListener('click',()=>{
menuPanel.classList.remove('panel-open'); /*panel-openクラスを取り除き、メニュー本体を非表示にします。。*/
menuMask.classList.remove('mask-visible'); /*mask-visibleクラスを取り除き、黒半透明背景を非表示にします。*/
});