【JavaScript・CSS】スライドメニューを実装する簡単な方法

今回はJavaScript・CSSを利用し、指定したボタンをクリックすると、画面の左端または右端から表示するスライドメニューを実装する簡単な例となります。
JavaScript・CSSでスライドメニューを実装する例
以下、JavaScript・CSSを利用したスライドメニューの例となります。
例では、「メニューを開く」ボタンを選択すると、画面右側からメニューが表示されます。また、ボタンのテキストが「メニューを閉じる」に代わり、メインコンテンツにはオーバレイを表示します。
スライドメニューを閉じる場合には、「メニューを閉じる」ボタンかオーバレイの箇所を選択します。
See the Pen JavaScript CSS Slide menue by yic666kr (@yic666kr) on CodePen.
JavaScriptの簡単な説明
JavaScriptのコードの簡単な説明となります。
スライドメニューを表示する関数
以下の関数は、スライドメニューを表示する関数となります。
関数内では、ボタンの要素に対してテキストを変更し、スライドメニュー・オーバレイ・ボタンの要素に対してclassの値を変更しています。
それによりスライドメニューの表示・非表示の状態を変更しています。
const menuButton = document.getElementById('menu-button');
const navMenu = document.getElementById('nav-menu');
const overlay = document.getElementById('overlay');
function menuToggle() {
menuButton.classList.toggle('button-change');
if(menuButton.textContent == 'メニューを開く'){
menuButton.textContent = 'メニューを閉じる'
}else{
menuButton.textContent = 'メニューを開く'
}
navMenu.classList.toggle('nav-menu-open');
overlay.classList.toggle('overlay-on');
}
要素のテキストを変更する方法
要素のテキストを変更する方法については、以下のリンク先を参考にしてみてください。
要素のclassの値を扱う方法
要素のclassの値を扱う方法については、以下のリンク先を参考にしてみてください。
要素にクリックイベントを追加
以下の箇所では、、classの値にmenu-eventを持つ要素に対して、上記の関数を実行するクリックイベントを追加してます。
また、クリックイベントで実行する関数の引数にはクリックしたボタン内のテキストを渡しています。
const menuEvent = document.getElementsByClassName('menu-event');
for(let i = 0; i < menuEvent.length; i++) {
menuEvent[i].addEventListener('click', menuToggle, false);
}
複数の要素に対してクリックイベントを追加する方法については、以下のリンク先を参考にしてみてください。
CSSの簡単な説明
CSSのコードの簡単な説明となります。
スライドメニューのCSS
以下の箇所はスライドメニューの要素に対してのCSSとなり、idの値nav-menuをもつ要素に対してposition: fixed; などを指定しています。
その要素にJavaScriptを利用してclassの値nav-menu-openを付与することで、rightプロパティの値を変更してスライドメニューの表示・非表示を切り替えています。
また、transitionプロパティを指定して要素の変化をアニメーションさせています。
#nav-menu{
position: fixed;
z-index: 20;
top: 47px;
right: -100%;
width: 80%;
height: 100vh;
background-color: #fff;
border-left: solid 1px #ddd;
transition: all 0.5s ease-out;
}
#nav-menu.nav-menu-open {
right: 0;
}
メニューのスライドする位置を左側にする場合
上記のrightプロパティをleftに変更することで、画面の左側から表示するスライドメニューとなります。
heightの値について
heightの値に指定した vh の単位については、以下のリンク先を参考にしてみてください。
オーバレイのCSS
オーバレイの表示・非表示についてのCSSは以下のリンク先を参考にしてみてください。