【CSS/JS】ハンバーガーメニューの作り方｜コピペで使えるサンプル付き

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

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

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

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

ヘッダーにメニューボタンが表示されている

参考サイト：The Virginia

クリックすると、メニューが表示されます

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

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

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

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

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

左ロゴ＋右メニュー#

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

メニューボタン#

1
#navbtn{
2
  position: fixed;
3
  top: 15px;
4
  right: 15px;
5
  padding: 0;
6
  outline: none;
7
  border: none;
8
  background: none;
9
  width: 30px;
10
  height: 20px;
11
  cursor: pointer;
12
}
13
/* 高さ1pxの線を上下に表示 */
14
#navbtn::before,
15
#navbtn::after{
16
  content : '';
17
  display: block;
18
  height: 1px;
19
  background-color: #333333;
20
  transform: translateY(10px);
21
  transition: 0.3s ease-in-out;
22
}

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

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

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

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

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

閉じるボタン#

1
.open #navbtn{
2
  z-index: 100;
3
}
4
.open #navbtn::before{
5
  transform: rotate(-45deg);
6
  box-shadow: none;
7
}
8
.open #navbtn::after{
9
  transform: rotate(45deg);
10
  box-shadow: none;
11
}

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

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

メニュー部分#

1
.nav{
2
    position: fixed;
3
    top: 0;
4
    left: 0;
5
    width: 100%;
6
    height: 100vh;
7
    background: rgba(0,0,0,0.9);
8
    color: #ffffff;
9
    display: flex;
10
    justify-content: center;     /* 中央表示 */
11
    align-items: center;
12
  }

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

メニューの表示切り替え#

1
.nav{
2
  /* 初期は非表示 */
3
  visibility: hidden;
4
  opacity: 0;
5
  /* ふわっと表示 */
6
  transition: 0.5s ease-in-out;
7
}
8
.open .nav{
9
  visibility: visible;
10
  opacity: 1;
11
}

JavaScriptでopenクラスを付与#

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

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

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

ボタンのアニメーション#

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

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

1
.nav{
2
  left: 100%;
3
  transition: left 0.5s;
4
}

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

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

1
.open nav{
2
  left:0;
3
}

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

1
html,body{
2
    overflow-x: hidden;
3
}

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

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

1
.nav{
2
  left: -100%;
3
  transition: left:0.5s;
4
}