Javascript

【JavaScript】ハンバーガーメニューの実装とJSの解説

 

いつもコピペで実装していた、ハンバーガーメニュー。

コピペって便利だけど、いざカスタマイズしようと思った時、仕組みを理解していないと対処が難しい場合があります。

そんな場合を想定して、よくあるUIの一つ、ハンバーガーメニューをJavaScriptで実装してみました。

 

ドットインストールの「JavaScriptでハンバーガーメニューを作ろう」を参考にしました。

 

JavaScriptでハンバーガーメニューを作る

 

See the Pen
JavaScriptでハンバーガーメニュー
by kei (@kei_01011)
on CodePen.


早速ですが完成版のdemoはこちらです。

右上にあるハンバーガーアイコンをクリックすると、右側からメニューが表示されます。

スマホ表示だけでなく、PC画面でもよく使われるUIですね。

 

これを応用して、モーダル表示にしたり、上部から表示させるようにしたり色々使えるようになるはずです。

 

それでは解説していきましょう。

 

 

HTML/CSSのパーツ

HTMLのパーツは以下の3つ

  • メニュー展開時の背景
  • ハンバーガーアイコン
  • メニュー本体

 

メニュー展開時の背景

メニューを目立たせるために、メニュー以外の部分には黒の透過背景を被せています。

<div id="cover"></div>

 

#cover{
  background: #000;
  opacity:.6;
  width: 100%;
  height: 100%;
  position:absolute;
  top: 0;
  left: 0;
  z-index:1;
  display:none;
}

widthとheightを100%にして、絶対配置し、z-indexで表示順を指定しておきます。

デフォルトでは非表示なので、display:none;とするのを忘れずに。

 

ハンバーガーアイコン

クリックするとメニューが展開するトリガーとなる、ハンバーガーアイコンです。

spanタグでスタイリングすることが多いみたいですが、ドットインストールではfontawesomeを使用していました。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">

<header>
  <i class="fa fa-bars" id="show"></i>
</header>

 

#show,#hide{
  float:right;
  cursor:pointer;
}

 

右側に寄せて、カーソルを変更しておきます。

次に出てくる、hideのアイコンも一緒にスタイルを当てておきます。

 

メニュー本体

右側からスライドしてくるメニューの本体部分のマークアップです。

<div id="menu">
<i class="fa fa-times" id="hide"></i>  
  <ul>
    <li><a href="#">MENU</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">MENU</a></li>
  </ul>
</div><!--menu-->
  

 

#menu{
  position:absolute;
  top:0;
  right: -180px;
  background: #3386ba;
  padding:10px 20px;
  box-sizing:border-box;
  width: 180px;
  min-height:100%;
  z-index:2;
  transition:.5s;

  li{
    list-style:none;
    margin-top:10px;
  }

  a{
    color:#fff;
    text-decoration: none;
      &:hover{
      opacity:.7;
    }
  }
}

 

こちらもposition:absolute;で右上に絶対配置にしておき、右側から表示させたいので、rightをwidthの数値分マイナスにしておきます。

黒背景の上に表示させたいのでz-indexを2にしています。

 

 

JavaScriptでクラス付与してアニメーション

いわゆるDOM操作ですが、その準備段階としてbodyタグに対してスタイリングをしておく必要があります。

 

body{
  font-size:20px;
  background: #eee;
  color:#333;
  box-sizing:border-box;
  width: 100%;
  height:100%;
  overflow-x:hidden;

  &.menu-open{
    overflow-y:hidden;
  }
  
  &.menu-open #cover{
    display: block;
  }
  
  &.menu-open #menu{
    right: 0;
  }
}

overflow-xとoverflow-yは、横や縦にスクロールが発生しないように固定するスタイリングです。

メニューにright-180pxを指定しているため、右側にスクロールが発生してしまうためです。

bodyタグに対して、.menu-openというクラスを付与することで、#coverと#menuのcssを変化させます。

.menu-openクラスを付与は、JavaScriptで指定していきましょう。

 

(function(){
  'use strict';
  
  var show = document.getElementById('show');
  //#showを取得
  var hide = document.getElementById('hide');
  //#hideを取得

  show.addEventListener('click',function(){
    //showをクリックした時、、
    document.body.className = 'menu-open';
    //bodyに.menu-openをつける
  });

    hide.addEventListener('click',function(){
    //hideをクリックした時、、
    document.body.className = '';
    //bodyのクラスを外す
  });

})();

 

JavaScriptの説明は、コメントしてある通りですが、

showをクリックした時に、bodyに,menu-openをつけることでメニューを表示させることができます。

これだけなら、JavaScriptで書いても簡単に実装することができますね。

 

JavaScriptは難しい。

jQueryじゃないとなんだかやりにくいって思っている人でも、一つずつ噛み砕いていけば理解できるかもしれませんね。

 

See the Pen
JavaScriptでハンバーガーメニュー
by kei (@kei_01011)
on CodePen.