Bootstrap4のハンバーガーメニューのボタンを開閉時に変更したい
解決済
回答 1
投稿
- 評価
- クリップ 1
- VIEW 2,198
Bootstrapの三本線のトグルボタンは簡単に設置できて便利だなと思ったのですが、ハンバーガーメニューを開いても閉じるアイコンに変わらないのは仕様でしょうか？
メニューの開閉に合わせて閉じるボタンに変えたいと思っているのですが可能ですか？
調べてもBootstrap3しかでてこなくて四苦八苦しています。
html自体は特別なことはしていないと思います。
<nav id="NavFixed" class="navbar fixed-top navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button id="navbtn" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Navber">
<ul class="navbar-nav justify-content-center text-center mt-4 mt-ms-0 m-md-auto">
<li class="nav-item"> <a class="nav-link py-4 px-3" href="#">ブログ</a> </li>
<li class="nav-item"> <a class="nav-link py-4 px-3" href="link.html">リンク</a> </li>
</ul>
</div>
</nav>-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+3
Bootstrap 4 のアイコンは(CSSに埋め込まれた)画像になっているので、同様に開いたときの画像を用意してみてはどうでしょうか？
.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");
}
.navbar-dark .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(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M6 6L 24 24M24 6L6 24'/%3E%3C/svg%3E");
}投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
2018/07/02 17:32
ばっちりです！ありがとうございました！