この記事では、HTML ナビゲーション バー ドロップダウン メニューの作成について説明します。すべてのナビゲーション バー ドロップダウン メニューのコードは、記事の冒頭に記載されています。理解できない場合は、以下に詳細な説明があります。この記事を一緒に見てみましょう
これから説明するのは、HTML ナビゲーション バーのドロップダウン メニューの作成です。最初に完全なサンプル コードを見てみましょう:
<style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } </style> <div class="dropdown"> <span>php中文网</span> <div class="dropdown-content"> <p>Hello World!</p> <p>Hello World!</p> </div> </div>
このコードを理解できますか?
理解できなくても、説明があれば理解できます。
HTML ナビゲーション バー メニューの分析例:
HTML ナビゲーション バー メニューの HTML 部分:
や 要素。
コンテナ要素 (
HTMLナビゲーションバーメニューのCSS部分:
.dropdownクラスはposition:relativeを使用します。これにより、ドロップダウンメニューのコンテンツがドロップダウンボタンの右下隅に配置されるように設定されます(positionを使用) : 絶対)。
.dropdown-content クラスは実際のドロップダウン メニューです。デフォルトでは非表示になっており、マウスが指定された要素に移動すると表示されます。 min-width 値が 160px に設定されていることに注意してください。好みに応じて変更できます。 注: ドロップダウン コンテンツをドロップダウン ボタンと同じ幅に設定する場合は、幅を 100% に設定します (overflow:auto 設定により、小さな画面でスクロールできます)。
box-shadow 属性を使用して、ドロップダウン メニューを「カード」のように見せます。
:ホバーセレクターは、ユーザーがドロップダウンボタンの上にマウスを移動したときにドロップダウンメニューを表示するために使用されます。
説明を読んで理解できましたか?これらの説明を上記のコードに当てはめれば理解できるでしょう。
それでは、ブラウザに表示される上記のコードの効果を見てみましょう:
これはデフォルトでは、テキストと同じようにまったく表示されませんが、マウスを上に動かすとすぐに、変化します:
ほら、これはコードの効果です。ナビゲーション バーのドロップダウン リスト、非表示のナビゲーション バーがあり、マウスが上に移動された場合にのみ反応します。
これはナビゲーション バーのドロップダウン メニューの簡単な作成です。ご質問がある場合は、以下にメッセージを残してください。
【編集者のおすすめ】
以上がHTML ナビゲーション バーにドロップダウン メニューを作成するにはどうすればよいですか?詳細なコード例は次のとおりですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。