ナビゲーションにドロップダウンメニューを加える - Bootstrapのチュートリアル

このレッスンではナビゲーションバーに ドロップダウンメニューを加えます。 今基本的なナビゲーションバーの スタイルができています。 ブランドがあって項目があって これはアクティブですね。 Link があって Disabled Dropdown とあるんですけど この Dropdown は ドロップダウンになっていません。 これを実際にドロップダウンに しようということですね。 ではまずその場合には これは li 要素の中に入っているんですけど この li 要素に対して nav-item に加えて dropdown というクラスを指定します。 それからこの a 要素ですね。 こちらも nav-link の後に dropdown -toggle ということで クリックするとドロップダウンが 開くというタイプですね。 それからさらに設定が必要で この後、場所は別にどこでもいいんですけど a 要素の中に属性として 加えればいいんですが data 属性を加えます。 data-toggle ということで そして値としては dropdown 綴り間違ってないですね。 大丈夫そうです。 そしたらもう早くも 三角マークがついています。 けれどもこれクリックしても メニュー開くわけないですね。 メニューがないですから。 そのメニューをこの li 要素の中に div 要素で加えていきます。 この a 要素の下ですね。 div でクラスは dropdown -menu です。 そして div 要素は閉じましょう。 次にメニュー項目、 これは a 要素で加えていきますけど a の class で dropdown 今度は item になります。 ということで 最初は action としましょう。 あと２つほど項目を加えたいと思うので こちらはもうコピー＆ペーストで いってしまいます。 ［コピー］で ［ペースト］ ［ペースト］で 項目名は変えましょうね。 Another action それから何かということで Something else ということにしましょう。 保存をしてブラウザーで 確かめてみましょう。 ［ファイル］を［保存］です。 Dropdown メニューをクリックすると toggle ですので開きます。 またクリックすると 消えるということで そしてこれを選ぼうかな…