はてB!PinterestFeedlyBootstrap4のDropdown(ドロップダウン)コンポーネントの使い方を解説。Bootstrap4のドロップダウンは単純なリストメニューの他に、フォームやグリッドレイアウトのコンテンツを入れることも可能。このページではドロップダウンの基本的な使い方とサンプルコードを集めてみました。Dropdown(ドロップダウン)の基本的な使い方Bootstrap4のドロップダウンメニューは、popper.jsというプラグインによってかなり強化されているのが特徴。popper.jsは画面の位置を検出して自動的にドロップダウンのメニュー位置を最適化してくれるライブラリ。popper.jsはドロップダウンの他に、TooltipとPopoverコンポーネントに使われています。公式ドキュメントはこちら基本構造ドロップダウンの基本構造は、トグルボタンとメニューを.dropdownのClassで囲みます。この構造は固定で、ボタンだけ別の位置に配置するということはできないっぽいです。</div></div>Dropdownで使えるClassと変数まとめドロップダウンのClassでは上下左右にメニューを出せるものやメニューのスタイルが含まれているためやや多め。ドロップダウンはCollapseと違い、ターゲットのidが必要ありません。ドロップダウンの動的配置、staticで無効化Dropdownのサンプルコードドロップダウンはトグルボタンの下だけでなく、上下左右にメニューを展開できるので、Wordpressの管理画面メニューのような使い方もできます。メニューの中にはなんでも入れることができるので、例えばECのカートの中身やメガメニューも簡単に作成可能(その分スマホ対応は面倒ですが...)。サンプルのデモページを見る複数階層のドロップダウンメニューを作るカテゴリやページナビゲーションで複数階層になる場合もよくありますが、少しカスタマイズすれば表示可能。クリックだとうまく開かないため、マウスオーバーで開くようにしました。最近は階層タイプではなく、メガメニューで表示されることも多です。Bootstrap4のドロップダウンメニューなら縦一列のメニューだけでなく、複雑なグリッドレイアウトも入れることがが可能。</div></div>ドロップダウンにECカートの中身を表示するドロップダウンにはテキストやリンク以外にもコンテンツを入れることができます。ECサイトでよくあるカートに入っている商品のリストなんかも作れます。WebデザイナーフリーランスWebデザイナー。レスポンシブサイトの作成、Wordpress、EC-CUBEやカラーミー、BASEなどのネットショップのデザイン・構築を担当。EC-CUBE4プラグイン「UICube」開発者。このブログでは初心者がつまずきやすいポイントや、制作で得た知識をわかりやすく解説します。初心者のためのBootstrap4のはじめ方Web制作のことでお困りですか?・急に案件が増えて手伝ってくれる人を探している・担当していたデザイナーがやめてしまった・新しくホームページを作りたいこのようなことでお困りでしたら、お気軽にご相談ください。デザインからコーディング、WordpressなどのCMSの構築まで対応させていただきます。homupedia.com。