【HTML・CSS・javascript】ハンバーガーメニューを作る

線が3本のボタンをクリックしたら画面いっぱいにメニューがスクロールしてくるハンバーガーメニューは、レスポンシブデザインと相性がよく、よく使われています。
あのハンバーガーメニューを簡単に作って見ようと思います。

HTML

<header class="header">
  <h1>ヘッダー</h1>
  <button id="gmenuTrigger" class="header-button">
    <i></i>
    <i></i>
    <i></i>
  </button>
</header>
<nav id="gmenuList" class="globalmenu">
  <ul class="globnalmenu-list">
    <li>menu01</li>
    <li>menu02</li>
    <li>menu03</li>
    <li>menu04</li>
    <li>menu05</li>
    <li>menu06</li>
    <li>menu07</li>
  </ul>
</nav>

CSS

.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  z-index: 99;
  display: grid;
  grid-template-columns: 1fr 60px;
  gap: 15px;
  align-items: center;
}
.header-button {
  position: relative;
  z-index: 99;
  display: block;
  width: 60px;
  height: 60px;
  background: #666;
  border: 0;
  cursor: pointer;
  transition: all 1s;
}

.header-button i {
  display: block;
  width: 30px;
  height: 2px;
  margin: 0 auto;
  background-color: #efc3bd;
  transition: all 0.5s;
}

.header-button i:nth-of-type(1) {
  margin-top: -2px;
}

.header-button i:nth-of-type(2) {
  margin-top: 8px;
}

.header-button i:nth-of-type(3) {
  margin-top: 8px;
}

.header-button.js-active {
  background: #957e80;
}

.header-button.js-active i:nth-of-type(1) {
  transform: translateY(10px) rotate(45deg);
  transform-origin: center center;
}

.header-button.js-active i:nth-of-type(2) {
  opacity: 0;
}

.header-button.js-active i:nth-of-type(3) {
  transform: translateY(-10px) rotate(-45deg);
  transform-origin: center center;
}

.globalmenu {
  transform: translateX(100%);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9;
  background: #957e80;
  transition: all 1s;
  overflow: auto;
}

.globalmenu.js-active {
  transform: translateX(0);
}
@media screen and (min-width: 768px) {
  .globalmenu.js-active {
    transform: translateX(33%);
  }
}
@media screen and (min-width: 1024px) {
  .globalmenu.js-active {
    transform: translateX(66%);
  }
}
.globnalmenu-list {
  padding:150px 20px;
}
.globnalmenu-list li {
  color:#fff;
}
.globnalmenu-list li + li {
  margin-top:30px;
}

javascript

window.onload = function () {
  document.getElementById("gmenuTrigger").addEventListener(
    "click",
    function () {
      document.getElementById("gmenuList").classList.toggle("js-active");
      document.getElementById("gmenuTrigger").classList.toggle("js-active");
    },
    false
  );
}

動作の説明

ハンバーガーメニュー部分の表示について

HTMLのヘッダの右上に置いてあるbuttonタグがハンバーガーメニューのボタンになっています。今回は分かりやすくするために、全てCSSでボタンを作成しています。iタグは本来文字をイタリック体に整形するタグなのですが、昔一時期iタグをアイコン表示に使うというのが流行ってた時期がありまして、それ以来時々iタグで記号の表示を行っています。

iタグが３つ並んでいる事から分かるように、このタグはCSSでメニューの３本の線を表示しています。
なぜこのような方法を取っているのかといいますと、ボタンを押した時にこの３本の線をアニメーションさせ、✕マークに変化するような処理を入れるためにこのような表示方法を取っています。

CSSの「.header-button i」がその部分になりますが、その下に「.header-button i:nth-of-type(1)」と言うCSSがあります。この「:nth-of-type(1)」と言うのは擬似クラスと言いbuttonの下階層にある iタグの１番目と言う意味を持っています。
（これらはそのうちここで詳しくメモ書きしたいと思います。）
今回は、この疑似クラスを使い１番～３番までのiタグを独自にアニメーションさせるようにしています。

ハンバーガーメニュー部分の動きについて

ではどの様にボタンを押したらアニメーションするのかといいますと、ボタンを押した時にjavascriptで「js-active」というクラスをつけたり外したりする処理を行うことでアニメーションを実現させます。

CSSの方を見てみますと、「.header-button.js-active i:nth-of-type(1)」と言う部分が見つかると思います。今回のアニメーションに関しては、この部分が重要になります。
.header-button.js-activeと、隙間無しでclassを並べると、それは同じタグに２つのclassが入ってることを意味します。つまり、javascriptで.header-buttonが入っているタグにjs-activeと言うタグを突っ込んでいるのです。
これを行うことにより、動的（ボタンを押す事により）にCSSが切り替わることになります。
CSSにtransitionを設置しておけば、この時変化したCSSに合わせてアニメーションを行います。

メニューの開閉について

ボタンを押したら画面外からメニューがスクロールして画面内に入ってくるように作る場合も、ボタンのアニメーションと同じような操作で実現させることが可能です。
今回は最初に「transform: translateX(100%);」と設定しておくことで、画面外（横100%）の位置にメニューを置いています。
ボタンを押したらこのメニューのCSSを書き換えて「transform: translateX(0);」としているだけです。
今日はちょっとしたレスポンシブ対応として、768pxと1024px部分で横幅の到達位置を変更するように作っています。こうすることで、メニューの無駄な開き具合を抑制したりすることが可能です。

javascriptについて

javascriptはCSSの動作に比べるとものすごくシンプルなものになっています。
「#gmenuTrigger」を押したときに「#gmenuTrigger」自身と「#gmenuList」に「js-active」を設置するようにしています。toggleを指定することができますので、押す度にjs-activeが付いたり外れたりします。
それだけの仕組みになっています。

今日のWEBメモは長くなりましたが

ちょっと今回は説明するものが多くて長い文章になってしまったのですが、今回のハンバーガーメニューのように、CSSで動作させるコーディングは現在のWEB制作の基本となるものですので、色々と覚えておいて損はないと思います。

お使いのホームページにこのようなものを設置したい場合はぜひパタパタワークスをご贔屓にお願い致します。