ハンバーガーメニュー大改造

2021年10月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、Bootstrap4のハンバーガーメニューをスタイリッシュにしていきます！
目次もいつもよりスタイリッシュでお送りします！

参考：デビルメイクライ3｜CAPCOM

✕の背景画像を用意

Bootstrap4では、ハンバーガーメニューの三本線は画像で設定されています。

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

メニュー展開時に✕の画像に変化するように設定してみましょう。

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M6 6L 24 24M24 6L6 24'/%3E%3C/svg%3E");
}

参考：Entac's Scrawl｜メモ：Bootstrap4のハンバーガーメニューのSVG背景画像をやめてメニュー開閉時にアニメーション出来る設定にする

うーん...悪くはないんだけど、何か物足りないですね。

三本線のスタイルを定義

<span class="navbar-toggler-icon"></span>

この部分が三本線を表しているのですが、まずはこれを3行に増やします。

<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>

次にCSSで背景画像を無効化し、スタイル（色、大きさ、位置）を定義します。

.navbar-toggler-icon {
  background-image: none;
  background-color: #000;
  width: 30px;
  height: 2px;
  display: block;
  position: absolute;
  transition: ease .4s;
}

.navbar-toggler-icon:nth-of-type(1) {
  top: 7px;
}

.navbar-toggler-icon:nth-of-type(2) {
  top: 14px;
}

.navbar-toggler-icon:nth-of-type(3) {
  top: 21px;
}

メニュー展開時に上の線を45度、下の線を－45度回転させて✕を作り、真ん中の線は非表示にします。

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(1) {
  top: 13px;
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(3) {
  top: 13px;
  transform: rotate(-45deg);
}

参考：NxWorld｜CSSで実装するハンバーガーメニュークリック時のエフェクト10＋

いい感じになりました！

45度の部分を変更すると、また違った動きになります。
315度にすると以下のようになります。

文字を添える

擬似要素afterを使います。

.navbar-toggler::after {
  position: absolute;
  left: -3px;
  bottom: -13px;
  content: "MENU";
  display: block;
  text-align: center;
  color: #000;
  font-size: 11px;
  font-weight: 700;
}

.navbar-toggler[aria-expanded="true"]::after {
  content: "CLOSE";
  font-size: 10px;
}

参考：NxWorld｜CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト10

「メニュー」「とじる」のように日本語にするのもアリですね。

ホバーエフェクト

擬似クラスhoverを使います。

.navbar-toggler[aria-expanded="false"]:hover .navbar-toggler-icon:nth-of-type(1) {
  background-color: #28a745;
}

.navbar-toggler[aria-expanded="false"]:hover .navbar-toggler-icon:nth-of-type(2) {
  width: 70%;
  background-color: #ffc107;
}

.navbar-toggler[aria-expanded="false"]:hover .navbar-toggler-icon:nth-of-type(3) {
  width: 35%;
  background-color: #dc3545;
}

マウスホバーで、真ん中と下の線の長さが変化します。ついでに色も変わります。

ハンバーガーメニューはスマホ時のみ表示させることが多いので、hoverを設定する必要はあまりないと思いますが、PCでもハンバーガーメニューを表示させたい時に使うかもしれません。

といいつつ当サイトもhoverの設定をしています（ホバーすると線の間隔が広がる）

三本線一本線✕

@keyframesを使ってアニメーションを設定します。

.navbar-toggler-icon:nth-of-type(1) {
  top: 7px;
  animation: menu-bar01 .75s forwards;
}

@keyframes menu-bar01 {
  0% {
    transform: translateY(7px) rotate(45deg);
  }
  50% {
    transform: translateY(7px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

.navbar-toggler-icon:nth-of-type(2) {
  top: 14px;
  transition: all .25s .25s;
  opacity: 1;
}

.navbar-toggler-icon:nth-of-type(3) {
  top: 21px;
  animation: menu-bar03 .75s forwards;
}

@keyframes menu-bar03 {
  0% {
    transform: translateY(-7px) rotate(-45deg);
  }
  50% {
    transform: translateY(-7px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(1) {
  animation: active-menu-bar01 .75s forwards;
}

@keyframes active-menu-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(7px) rotate(0);
  }
  100% {
    transform: translateY(7px) rotate(45deg);
  }
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(3) {
  animation: active-menu-bar03 .75s forwards;
}

@keyframes active-menu-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-7px) rotate(0);
  }
  100% {
    transform: translateY(-7px) rotate(-45deg);
  }
}

これもいい感じですね。

矢印になる

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(1) {
　　width: 10px;
　　transform: translate(-2px, 4px) rotate(-45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(3) {
　　width: 10px;
　　transform: translate(-2px, -4px) rotate(45deg);
}

うちみたいに、左右からスライドして出てくるメニューにはいいかもしれません。

ハンバーガー

回転するとフライドポテトになります！

まとめ

アニメーションやエフェクトはほどほどにしましょう。

目次で使ったスタイリッシュなフォントはGoogle FontsのCeviche Oneです。

Google Fontsについてはまた別の記事で紹介します。