横からメニューがスライドで出てくる【ドロワーメニュー】をプラグインを使わずに実装する方法

このブログでも使用しているメニューが横からスライドで出てくる、通称【ドロワーメニュー】をプラグインを使わずに実装する方法をメモしておきます。

右上にある三本線をクリック（タップ）するとメニューが出てくる定番のあれですね。

PCでもSPでも使える便利な方法ですが1からコードを書くのはなかなか初心者には難しく、面倒なのでコピペで使えると便利ですよね。

もちろんクラスと構造を理解すればアレンジも可能です。

個人的には上からスライドして出てくるハンバーガーメニューよりも好みです。

横からスライドして出てくるドロワーメニューの各ファイルテンプレ

動的な要素も含まれているのでHTML、CSS、JSの3つのファイルに記述が必要になります。

ここではこのブログ同様右上のメニューボタンを押すと、現在見えているページも一緒にスライドするパターンをメモしておきます。

HTML

<div class="wrapper">
  <main>
    <div>メインのコンテンツが入る場所</div>
  </main>
  <div class="menu-trigger" href="">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <nav>
    <ul>
      <li>メニュー名</li>
      <li>メニュー名</li>
      <li>メニュー名</li>
    </ul>
  </nav>
  <div class="overlay"></div>
</div>

CSS

.wrapper {
  height: 100%;
  overflow-x: hidden;
  position: relative;
}
  .overlay {
    content: "";
    display: block;
    width: 0;
    height: 0;
    background-color: rgba(80,80,80,.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity .5s;
  }
  .overlay.open {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  main {
    height: 100%;
    transition: all .5s;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  main.open {
    transform: translateX(-250px);
  }
  .menu-trigger {
    display: inline-block;
    width: 36px;
    height: 28px;
    vertical-align: middle;
    cursor: pointer;
    position: fixed;
    top: 22px;
    right: 30px;
    z-index: 100;
  }
  .menu-trigger span {
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #555;
    transition: all .5s;
  }
  .menu-trigger.active span {
    background-color: #555;
  }
  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  .menu-trigger.active span:nth-of-type(1) {
    transform: translateY(12px) rotate(-45deg);
  }
  .menu-trigger span:nth-of-type(2) {
    top: 12px;
  }
  .menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
  }
  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }
  .menu-trigger.active span:nth-of-type(3) {
    transform: translateY(-12px) rotate(45deg);
  }
  nav {
    width: 250px;
    height: 100%;
    padding-top: 70px;
    background-color: #eee;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    transform: translate(250px);
    transition: all .5s;
  }
  nav.open {
    transform: translateZ(0);
  }
  nav li {
    color: #555;
    text-align: center;
    padding: 10px 0;
  }
    nav li a {
      position: relative;
      display: inline-block;
      transition: .3s;
    }
    nav li a:hover {
      color: #f88;
    }
    nav li a::after {
      position: absolute;
      bottom: 0;
      left: 50%;
      content: '';
      width: 0;
      height: 1px;
      background-color: #f88;
      transition: .3s;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    nav li a:hover::after {
      width: 100%;
    }

34〜75行目でハンバーガーボタンが×印になるようにしています。

ドロワーメニューだけではなくハンバーガーメニューでもこれは使えるので便利ですね。

96行目からはメニュー名にhoverしたときにメニュー名の色を変えてアンダーラインが出てくるためのCSSなのでなくても問題はありません。

JS

$('.menu-trigger').on('click',function(){
  if($(this).hasClass('active')){
    $(this).removeClass('active');
    $('main').removeClass('open');
    $('nav').removeClass('open');
    $('.overlay').removeClass('open');
  } else {
    $(this).addClass('active');
    $('main').addClass('open');
    $('nav').addClass('open');
    $('.overlay').addClass('open');
  }
});
$('.overlay').on('click',function(){
  if($(this).hasClass('open')){
    $(this).removeClass('open');
    $('.menu-trigger').removeClass('active');
    $('main').removeClass('open');
    $('nav').removeClass('open');      
  }
});

1〜13行目でmenu-triggerをクリックするとopenクラス又はactiveクラスを付けたり外したりしてメニューを表示又は非表示にしています。

14〜21行目でoverlay（メインコンテンツ部分）をクリックしてもメニューが閉じるようにしています。

よくわからなくても見た目がオシャレだからまずはコピペで使ってみよう

ちょっと記述が長くなってしまっているのでわからない部分もあるかもしれませんが、3つのファイルにこれを書けばこのブログと同じようなドロワーメニューが実装できます。

なにはともあれまずは使ってみるところから始まりますので、1度試しに使ってみてはいかがでしょうか？