Bootstrap5.3.0のNavbar（ナビゲーションバー）は画面が狭くなったとき中にあるハンバーガーメニューが、閉じる時も開く時も三本線のハンバーガーメニューのままなんだけど、閉じるときはバッテン（X）マークにしたいなぁ。。。
と、思ったら、どうしてもやりたくなって、、、ちょっとしたこだわり😅
実力があればサクって書いちゃうんだけど、、、今は現役では無いので、それはキビシイ😥ので、ネットを色々と調べたんだけど、なかなかいいのが無かった。
結局、ChatGPT先生に教えてもらうことにしたら、そこそこの答えを出してくれたので、というか、さすがほぼ完璧だった。最後の仕上げだけ自力でやった✌️。
以下が変更内容です。
実際に僕のホームページでやってますので、参照いただき、必要ならばご自由にソースを利用してください。
サンプルはここの👉「ホームページ」です。
スタイル
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
background: no-repeat center center;
background-size: 100% 100%;
}
.navbar-toggler-icon.hamburger {
background-image: url("data:image/svg+xml;charset=UTF8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M2 4h12M2 8h12M2 12h12'/%3e%3c/svg%3e");
}
.navbar-toggler-icon.close-icon {
background-image: url("data:image/svg+xml;charset=UTF8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M2 2L14 14M14 2L2 14'/%3e%3c/svg%3e");
}※上記のようにアイコンのスタイルを追加。bootstrapのcssを読み込んだ位置の後ろに<style>タグで囲んで追加（もしくは、cssファイルに追加でも👍、bootstrapより後ろで読み込む必要有り）
HTML修正箇所
<span class="navbar-toggler-icon hamburger"></span>※navbar-toggler-iconクラスの後ろにhamburgerクラスを追加
スクリプト
<script>
document.addEventListener('DOMContentLoaded', function () {
var toggler = document.querySelector('.navbar-toggler');
var icon = toggler.querySelector('.navbar-toggler-icon');
toggler.addEventListener('click', function () {
if (icon.classList.contains('hamburger')) {
icon.classList.remove('hamburger');
icon.classList.add('close-icon');
} else {
icon.classList.remove('close-icon');
icon.classList.add('hamburger');
}
});
});
</script>※クリックでハンバーガーメニューとクローズアイコン（X）を切り替える。HTML<body>最後の（</body>タグの前）位置に入れる。
ハンバーガーメニューの三本マークとバッテン（X）マークは、SVGで描画しているんだけど、SVGって基礎知識レベルまでしか知らなくて、これまでさわったことがなかった。（ちなみに今回はChatGPTにお願いした😆）
これを機会に、SVG勉強したくなってきた今日この頃であった。