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

寻∝梦
リリース: 2018-09-04 14:26:11
オリジナル
29120 人が閲覧しました

この記事では、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 ナビゲーション バーにドロップダウン メニューを作成するにはどうすればよいですか?詳細なコード例は次のとおりです

これはデフォルトでは、テキストと同じようにまったく表示されませんが、マウスを上に動かすとすぐに、変化します:

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

ほら、これはコードの効果です。ナビゲーション バーのドロップダウン リスト、非表示のナビゲーション バーがあり、マウスが上に移動された場合にのみ反応します。

これはナビゲーション バーのドロップダウン メニューの簡単な作成です。ご質問がある場合は、以下にメッセージを残してください。

【編集者のおすすめ】

HTMLマーキータグで画像のスクロールを設定するには?マーキータグの画像スクロールコード例

HTMLでフォントの色を設定するには? CSSで文字の色を設定する方法を紹介

以上がHTML ナビゲーション バーにドロップダウン メニューを作成するにはどうすればよいですか?詳細なコード例は次のとおりですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート