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

2020年7月25日

ホームページでよく出てくるパーツ「ハンバーガーメニュー」。

今回は、ハンバーガーメニューの作り方を紹介します。

ハンバーガーメニューとは

ハンバーガーメニューとは、スマホなどでのクリックすると開くメニューのこと。この３本線が、ハンバーガーのように見えることから、ハンバーガーメニューと呼ばれています。

参考サイト：The Virginia

【ハンバーガーメニューのメリット】

スマホなどの小さい画面で、コンテンツの表示エリアを確保できる。
コンテンツとは別に、メニューエリアを確保できるので、メニューをクリックしやすい。

【ハンバーガーメニューのデメリット】

スマホに慣れていない人は、３本線がメニューだと分からない
一度メニューボタンを押さないと、メニューの中身が見れない

ハンバーガーメニューの作り方

左ロゴ＋右メニュー

サイズを×0.5にして、横幅を広くすると、PC用の表示になります。
PC版では、メニューボタンがなくなり、左側にロゴ、右側にメニューが並びます。

メニューボタン

#navbtn{
  position: fixed;
  top: 15px;
  right: 15px;
  padding: 0;
  outline: none;
  border: none;
  background: none;
  width: 30px;
  height: 20px;
  cursor: pointer;
}
/* 高さ1pxの線を上下に表示 */
#navbtn::before,
#navbtn::after{
  content : '';
  display: block;
  height: 1px;
  background-color: #333333;
  transform: translateY(10px);
  transition: 0.3s ease-in-out;
}

#navbtn::beforeで上の線、#navbtn::afterで下の線を作っています。

高さ1pxの線をtransform: translateY(10px)で上下に10px移動させています。

transitionをつけているので、切り替わる際にアニメーションがつきます。

/* 高さ1pxの線を中央に表示 */
#navbtn::before{
  transform: translateY(-10px);
  box-shadow: 0 10px #333333;
}

#navbtn::beforeにbox-shadowをつけることで、中央の線を表示させています。（上の線の陰が真ん中の線になります。）

閉じるボタン

.open #navbtn{
  z-index: 100;
}
.open #navbtn::before{
  transform: rotate(-45deg);
  box-shadow: none;
}
.open #navbtn::after{
  transform: rotate(45deg);
  box-shadow: none;
}

もともとあった３本線のメニューから、beforeとafterの上下線を45度ずつ傾けて、×にしています。

box-shadowをnoneにすることで、中央線を一本なくしています。

メニュー部分

.nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    color: #ffffff;
    display: flex;
    justify-content: center;     /* 中央表示 */
    align-items: center;
  }

flexにして、中央表示をしています。

メニューの表示切り替え

.nav{
  /* 初期は非表示 */
  visibility: hidden;
  opacity: 0;
  /* ふわっと表示 */
  transition: 0.5s ease-in-out;
}
.open .nav{
  visibility: visible;
  opacity: 1;
}

JavaScriptでopenクラスを付与

メニューボタンを押すと、htmlにopenクラスが付与されるようにします。

document.getElementById("navbtn").onclick = function(){
  document.querySelector('html').classList.toggle('open');
}

いろいろなハンバーガーメニュー実装サンプル

ボタンのアニメーション

右上にボタン＋右からスライド

【解説】
画面右の外側（left:100%）にメニューを配置しておきます。

.nav{
  left: 100%;
  transition: left 0.5s;
}

transition:leftで
leftの値にアニメーションをつけて変化させます。

メニューを開いた時に、leftを0にして、画面左端に持ってきます。

.open nav{
  left:0;
}

初期で、画面外に配置したオーバーレイが表示されないようにしています。

html,body{
    overflow-x: hidden;
}

左上にメニュー＋左からスライド

【解説】
画面左の外側（left:-100%）にメニューを配置しておきます。

.nav{
  left: -100%;
  transition: left:0.5s;
}

dev-nakatan

中央にボタン＋上からスライド

URLをコピーしました！

この記事を書いた人

えみ

元エンジニア・コンサルタント→フリーランスへ。
個人事業主さん向けにWordPress・HP作成の個人レッスンをしています。