ボタンクリックで全画面に表示されるモーダルウインドウ風のメニューを実装する方法

ボタンをクリックした際に全画面に表示される、モーダルウインドウ風のメニューを実装する方法をご紹介いたします。

簡単なデモページを用意したので、挙動についてはデモページをご確認いただければと思います。

デモページを見る

ボタンクリックで全画面に表示されるモーダルウインドウ風のメニューを実装する方法

HTMLのマークアップ

HTMLはシンプルで、以下のようにボタンとメニューをマークアップします。

<!-- メニューボタン -->
<button id="btn-menu">
  <span></span>
  <span></span>
  <span></span>
  MENU
</button>

<!-- メニュー -->
<nav id="sp-menu">
  <div id="sp-menu-position">
    <ul class="sp-menu-list">
      <li class="col"><a href="#">メニュー1</a></li>
      <li class="col"><a href="#">メニュー2</a></li>
      <li class="col"><a href="#">メニュー3</a></li>
      <li class="col"><a href="#">メニュー4</a></li>
      <li class="col"><a href="#">メニュー5</a></li>
    </ul><!-- .sp-menu-list -->
  </div><!-- #sp-menu-position -->
</nav><!-- #sp-menu -->

#btn-menuがボタン部分で、#sp-menuがメニュー部分です。

スクリプトの実行

続いて、jQuery本体を読み込んで、スクリプトを実行します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
  var $body = $('body');

  //メニューボタンクリックでクラスを追加
  $('#btn-menu').on('click', function () {
    $body.toggleClass('open-menu');
  });

  //メニュー以外の部分をクリックで閉じる
  $('#sp-menu').on('click', function () {
    $body.removeClass('open-menu');
  });
});
</script>

スクリプトは非常にシンプルで、ボタンをクリックした時にbodyにクラスを追加しているだけです。

CSSで装飾を整える

最後にCSSで全体に背景色などを付け、モーダルウインドウ風の見た目に仕上げます。

/* メニューボタン */
#btn-menu {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 78px;
  height: 70px;
  padding: 0 20px;
  color: #fff;
  background: #e73363;
  z-index: 2;
  transition: all .2s ease-in;
}

#btn-menu span {
  display: block;
  width: 100%;
  height: 5px;
  background: #fff;
}

#btn-menu span:nth-of-type(1) {
  margin: 5px 0 0;
}

#btn-menu span:nth-of-type(2) {
  margin: 8px 0 0;
}

#btn-menu span:nth-of-type(3) {
  margin: 8px 0 5px;
}

/* メニュー */
#sp-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.65);
  overflow: scroll;
  z-index: 1;
  transition: all .3s ease-in;
  visibility: hidden;
  opacity: 0;
}

.open-menu #sp-menu {
  visibility: visible;
  opacity: 1;
}

#sp-menu-position {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.sp-menu-list {
  list-style: none;
}

.sp-menu-list a {
  font-size: 22px;
  font-weight: bold;
  color: #e73363;
}

#sp-menuで画面全体に半透明の背景色を敷いています。「position: fixed;」と「width: 100%;」、「height: 100%;」の組み合わせで、画面全体に背景色が付くようになるというわけですね。

また、ボタンクリックをクリックした際に「visibility: visible;」「opacity: 1;」に値を上書きすることでメニューを表示しています。

あとがき

メニューの中に画像などを入れてメニューの領域を広く使いたい時は、便利な手法ですね。

スマホだけでなくPCサイトでも活用できるかと思いますので、ぜひ参考にしてください。