We Blog Weblog

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

Web

2021年10月15日

ハンバーガーメニュー

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

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

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

D o p e !✕の背景画像を用意

C r a z y !三本線のスタイルを定義

B l a s t !文字を添える

A l r i g h t !ホバーエフェクト

S w e e t !三本線一本線

S S h o w t i m e ! !矢印になる

S S S t y l i s h ! ! !ハンバーガー

まとめ

参考:デビルメイクライ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についてはまた別の記事で紹介します。

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP