しかし、「jquery-3.5.0」では不具合により、Bootstrapのいくつかの機能が動かなくなってしまっていたようだ。 以下の3.5.1では改善されたようなので、そちらに変更したらハンバーガーメニューは正常に動作するように戻っていた。 Bootstrapとは? そもそもBootstrapは、CSSフレームワークと呼ばれるCSS、JavaScriptのパーツ集です。. .navbar-toggler, data-toggle="collapse", data-target="#...", .navbar-toggler-icon, .navbar-collapse, .navbar-nav, .nav-item, .nav-link を用いてナビゲーションメニュー(別名ハンバーガーメニュー)を表示します。詳細は下記のサンプルを参照してください。 これ以上デザインを凝りたい場合は、ネットからハンバーガーメニューを拾ってくるか、デザイナーに依頼する必要がありそうですね。, ビジネス活用に必要な機能がそろった 法人向け共用レンタルサーバー「SV-Basic」, Animate.cssの開始時間(Delay)アニメーション時間(Dulation)動作幅を調整する方法, ACE01誕生から8年ぶりの新共用サーバー「シェアードプラン SV-Basic」を語る!, CPIのTwitterアカウントでは、サイト、サーバー管理者のための重要なセキュリティ情報や、サイト運営者のためのヒント、お得なキャンペーン情報をお知らせしています。, 掲載内容について、当社は情報の掲載には細心の注意を払っておりますが、完全性などについて保証を行うものではありませんので予めご了承ください。 掲載されている情報をご利用いただいた際に、損害が発生・誘発した場合や、情報自体の真偽性・合法性・道徳性・著作権の許諾等について問題が発生した場合などについて、当社は一切の責任を負いません。掲載されている情報を利用したサイト製作については、ご自身の責任において行ってください。. 「ハンバーガーメニュー」のアイコンサンプルを複数作成してまとめました。codepenからコピペ可となっていますので、一からコーディングするのが手間と感じる方は参考に使ってしまってください(細かいサイズやレイアウト調整は自己責任で宜しくお願いします) Bootstrap4 Navbar collapse without jQuery. Bootstrap4 Navbar collapse without jQuery by AgoPeanuts (@AgoPeanuts) CSS HTML5 Bootstrap bootstrap4. Bootstrap4 のナビバーでは、画面が小さくなるとハンバーガーメニューに切り替えるというレスポンシブ対応ができるが、ハンバーガーメニューの開く閉じる動作は jQuery の読み込みが必要となる。Bootstrap4 の CSS を使いたいが、メニュー開閉以外に jQuery は使わず、そのためだけに jQuery を読み込みたくなかった。ここ数年、脱jQuery が広まっているし、素の JavaScript だけで書いてみた。, Bootstrap4 のハンバーガーメニューを閉じたり開いたりすると、collapse クラスの div に show クラスが追加されたり、削除されたりする。( navbar-toggler クラスのボタンに collapsed クラスが追加された削除されたり、 aria-expanded が false / true に切り替わるがここは手を加えていない。aria-* とかは、WAI-ARIA 属性でアクセシビリティを向上させるためのもの。音声リーダーなどに認識されるため、ここを制御しないならつけない方がいいと思われる。), 閉じた状態