Bootstrap WEB制作

【Bootstrap】ハンバーガーメニューが開かない。を解決!

icon

レスポンシブデザインにかかせないハンバーガーメニュー。

それを簡単に実装できるのがBootstrapです。

テンプレートがありますので、それをHtmlに貼り付けるだけで実装できちゃいます。

しかし、貼り付けたのはいいものの、クリックしてもメニューが開かない、と困っていませんか?

今回はこれを解決するために、2つのことをチェックしてください。



チェックポイント

その1 コードの変更

data-bs-toggle="collapse"

data-bs-target="#navbarSupportedContent"

data-bs-toggle="dropdown"

 

まず貼り付けたハンバーガーメニューのテンプレートのクラス(class)に、上記のようなコードがある場合、 まず「bs」に着目してください。

※Bootstrapのバージョンによって無い場合もあります。

私の場合、この「bs」があると、ハンバーガーメニューは開きませんでした。

ですので「bs」を削除し、

data-toggle(他省略)

としてみください。


その2 jQueryやJSの読み込み

Bootstrapのコンポーネントの多くは、JavaScriptなどを使用する必要があります。

具体的にはjQuery、Popper.js、JavaScriptプラグインです。

</body>タグの直前にこの3つが読み込まれているか、確認しましょう。

 

詳しくはこちらを参考にしてください。
https://your-3d.com/howtouse-boostrap-for-beginner/

 

 

まとめ

ハンバーガーメニューがひらかないときは、

  • コードのチェック
  • ライブラリの読み込み

この確認をして修正を試みてください。

私自身の体験ですので、他の原因がある場合もありますので御了承くださいませ。

Bootstrapは、クラス(class)を変えるだけで、配置や色を変えることが来ますので、いろいろとアレンジしてみてください。

 

Bootstrap関連の記事も紹介しておきます↓

-Bootstrap, WEB制作
-,

© 2024 人生フリーハンド Powered by AFFINGER5