HTML と CSS を使用してドロップダウン メニューを作成する方法

ドロップダウン メニューを使用すると、ページ上のさまざまなカテゴリのアイテムを階層的に表示できます。ユーザーがメニュー項目の上にマウスを置くと、メニュー項目の下にサブメニュー項目が表示されます。 このようなメニューは、HTML と CSS コードのみを使用して作成できます。 このガイドを学習すると、例に若干の変更を加えて独自のメニューを作成できるようになります。さらに、メニューの作成方法を習得できるように、各ステップのスクリーンショットを提供します。 まず HTML コードから始めて、次に CSS スタイルシートに移ります。

ステップ

html

1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/45\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-1-Version-4.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-1-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/4\/45\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-1-Version-4.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-1-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1 CSS メニューの HTML コード フレームワークを作成します。メニューのコンテナーとして、class="nav" 属性を持つ 'div' タグを使用します。スクリーンショットに示されている HTML コードでは、メイン メニュー項目を表すために単純な順序なしリスト (ul) が使用されています。
2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f2\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-2-Version-4.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-2-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/f\/f2\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-2-Version-4.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-2-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2メインメニュー領域にリンクを追加します。この手順では、順序なしリスト (ul) の各項目にリンクを追加します。
3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6a\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-3-Version-4.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-3-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/6\/6a\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-3-Version-4.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-3-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 「About Us」の下の LI タグ内に、サブメニューへのリンクを表す順序なしリストを追加します。
4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/af\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-4-Version-4.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-4-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/a\/af\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-4-Version-4.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-4-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 HTML コードにスタイルシート リンクを追加します。これで、メニューとサブメニューの明確な階層レイアウト構造を含む HTML コードが完成しました。外部 CSS スタイルシートを使用するため、コードの「head」セクションにスタイルシートへのリンクを追加する必要があります。 広告する

CS

1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/af\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-4.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/a\/af\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-4.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1CSS ファイルを作成します。 HTML フレームワーク コードを完了したら、スタイル シートを使用して次のメニュー機能を実装する必要があります。 HTML 内のメニュー項目をターゲットにするために CSS セレクターを使用するため、HTML に追加の ID またはクラス属性を追加する必要はありません。
   • UL 内に UL を埋め込むことでサブメニューを配置し、display:none; 属性を使用して非表示にします。
   • マウスが LI 要素の上に移動すると、ブロック モードに切り替えて対応するサブメニューを再表示する必要がありますが、> コマンドを使用すると、マウスがホバーした位置に LI 要素を配置できます。
2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-4.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/0\/08\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-4.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 CSS スタイルシートを使用してメイン メニューを表示します。
   • position:relative; は、サブメニューがメインメニューを基準として表示されることを宣言します。
   • display:inline-block; は、メニューを適切な幅に調整できることを宣言します。
3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/90\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-7-Version-4.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-7-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/9\/90\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-7-Version-4.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-7-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3マウスをホバーしたときのフォントのグラデーション色を設定します。図のコードは、リンクをホバーすると暗いグラデーションの背景と白いテキストに変更します。
4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/dd\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-8-Version-4.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-8-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/d\/dd\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-8-Version-4.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-8-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4スタイルシートを使用してサブメニューを表示します。現在のサブメニュー スタイルはメイン メニュー要素を継承します。サブメニュー項目をメインメニュー項目の下に垂直に表示します。
5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e5\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-4.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/e\/e5\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-4.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5ドロップダウン メニューを配置し、メニュー項目を揃えます。これにより、灰色の背景も削除されます。
   • position:relative; 宣言をリスト項目の先頭に追加する必要があります。
   • 相対配置のリストに position:absolute; 宣言を追加する必要があります。
   広告する