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