メモ：Bootstrap 4のハンバーガーメニューのSVG背景画像をやめてメニュー開閉時にアニメーション出来る設定にする

Bootstrap4のデフォルトのナビゲーションは、3の時と少し書き方が異なっており、ハンバーガーメニュー独特の「三」は、下記のCSSの記述のようにSVGの背景画像として設定されています。

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%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");
}

しかし背景画像だと、メニューを押した時にCSSのtransformを活用して「シュッ」とアニメーションをして見た目を「☓」に変化させることは出来ません（一応、下記のように設定することで、メニューが開いている時の背景画像を変えることは出来ます。aria-expended=”true”という記述がポイント）

.navbar-light .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");
}

そこで、Bootstrap 4のハンバーガーメニューだけ、先述のような「シュッ」としたアニメーションが出来るように書き換えてみました。

デモを見る

カスタマイズ詳細

まずは、HTMLファイル。Bootstrap 4のデフォルトでは1つしかないspanの記述ですが、これを3つにします。

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

次に、CSSファイルの書き方の一例。
骨子としては、●既存の背景画像を無効化　●3つになったそれぞれのspanに背景色や座標を設定　●メニューが開いている時と閉じている時それぞれで設定　といったところでしょうか。

.navbar-dark .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 0px;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  position: relative;
}
.navbar-dark .navbar-toggler-icon {
  background-image:none; /* この行で背景画像を無効化 */
  background-color: #fff;
  width: 30px;
  height: 2px;
  display: block;
  position: absolute;
  transition: ease .5s;
}

/* 3本のバーそれぞれの座標を設定 */
.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;}

/* メニューが開いている時の　3本のバーそれぞれの座標および角度を設定 */
.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);
}

他の注意点としては、bootstrap本体のバージョンアップが必要な時に作業をスムーズに行えるよう、style.cssなど、bootstrap.cssとは別のCSSファイルに記載するようにしましょう。

デモを見る

参考リンク

Bootstrap – Bootstrap4のハンバーガーメニューのボタンを開閉時に変更したい｜teratail

0