ホームページ > 記事 > ウェブフロントエンド > HTML ナビゲーションバーにドロップダウンメニューを作成するにはどうすればよいですか?詳細なコード例は次のとおりです

HTML ナビゲーションバーにドロップダウンメニューを作成するにはどうすればよいですか?詳細なコード例は次のとおりです

寻∝梦オリジナル: 2018-09-04 14:26:1129127ブラウズ

この記事では、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 部分:

や要素。

コンテナ要素 (

など) を使用してドロップダウンメニューのコンテンツを作成し、任意の場所に配置します。

要素を使用してこれらの要素をラップし、CSS を使用してドロップダウンコンテンツのスタイルを設定します。

HTMLナビゲーションバーメニューのCSS部分:

.dropdownクラスはposition:relativeを使用します。これにより、ドロップダウンメニューのコンテンツがドロップダウンボタンの右下隅に配置されるように設定されます(positionを使用) ：絶対）。

.dropdown-content クラスは実際のドロップダウンメニューです。デフォルトでは非表示になっており、マウスが指定された要素に移動すると表示されます。 min-width 値が 160px に設定されていることに注意してください。好みに応じて変更できます。注: ドロップダウンコンテンツをドロップダウンボタンと同じ幅に設定する場合は、幅を 100% に設定します (overflow:auto 設定により、小さな画面でスクロールできます)。

box-shadow 属性を使用して、ドロップダウンメニューを「カード」のように見せます。

:ホバーセレクターは、ユーザーがドロップダウンボタンの上にマウスを移動したときにドロップダウンメニューを表示するために使用されます。

説明を読んで理解できましたか？これらの説明を上記のコードに当てはめれば理解できるでしょう。

それでは、ブラウザに表示される上記のコードの効果を見てみましょう:

HTML ナビゲーションバーにドロップダウンメニューを作成するにはどうすればよいですか?詳細なコード例は次のとおりです