【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の値にmenu-eventを持つ要素に対して追加してます。

また、クリックイベントで実行する関数の引数にはクリックしたボタン内のテキストを渡しています。

  const menuEvent = document.getElementsByClassName('menu-event');
  for(let i = 0; i < menuEvent.length; i++) {
    menuEvent[i].addEventListener('click', menuToggle);
  }

指定したすべての要素に対してクリックイベントを適用させる方法の詳細は、以下のリンク先を参考にしてみてください。

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は以下のリンク先を参考にしてみてください。

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。