CSS Web ナビゲーション メニュー: さまざまなインタラクティブなナビゲーション メニューを作成します

CSS Web ページ ナビゲーション メニュー: さまざまな対話型ナビゲーション メニューを作成するには、特定のコード サンプルが必要です

ナビゲーション メニューは、Web ページの最も重要なコンポーネントの 1 つです。ユーザーが Web サイトのさまざまなページにすばやく移動できるようにします。 CSS を柔軟に使用することで、さまざまなインタラクティブなナビゲーション メニューを作成し、ユーザー エクスペリエンスと Web サイトの使いやすさを向上させることができます。この記事では、一般的なナビゲーション メニューの種類をいくつか紹介し、参考として対応するコード例を示します。

#水平ナビゲーション メニュー

水平ナビゲーション メニューは、最も一般的なタイプのナビゲーション メニューです。通常、これは、異なるページに移動するために使用される水平方向に配置されたリンクの行として表示されます。以下は、単純な水平ナビゲーション メニューのコード例です。

<ul class="horizontal-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

.horizontal-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.horizontal-menu li {
  display: inline-block;
}

.horizontal-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.horizontal-menu li a:hover {
  background-color: #f1f1f1;
}

上記のコードでは、順序なしリスト

とリスト項目
• を使用しています。ナビゲーションメニューを作成します。 display: inline-block; を設定すると、メニュー項目が横に並びます。メニュー項目の背景色はマウスオーバーで変化し、視覚的なフィードバックを提供します。
  垂直ナビゲーション メニュー
  垂直ナビゲーション メニューは、もう 1 つの一般的なタイプのナビゲーション メニューです。通常、これは、異なるページに移動するために使用されるリンクの垂直方向に配置された列として表示されます。以下は、単純な垂直ナビゲーション メニューのコード例です。

  <ul class="vertical-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>

  .vertical-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .vertical-menu li {
    margin-bottom: 10px;
  }
  
  .vertical-menu li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
  }
  
  .vertical-menu li a:hover {
    background-color: #f1f1f1;
  }

  上記のコードでは、順序なしリストとリスト項目を使用してナビゲーション メニューを作成することもできます。

  margin-bottom: 10px; を設定すると、メニュー項目が一定の間隔をあけて縦に配置されます。マウスオーバーするとメニュー項目の背景色も変わります。

  ドロップダウン メニュー
  ドロップダウン メニューは、より多くのメニュー オプションを表示したり、マウスをホバーしたときに非表示のオプションを表示したりできる一般的な対話型ナビゲーション メニューです。以下は、単純なドロップダウン メニューのコード例です。

  <ul class="dropdown-menu">
    <li><a href="#">产品</a>
      <ul>
        <li><a href="#">产品一</a></li>
        <li><a href="#">产品二</a></li>
        <li><a href="#">产品三</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>

  .dropdown-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .dropdown-menu li {
    display: inline-block;
    position: relative;
  }
  
  .dropdown-menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
  }
  
  .dropdown-menu li:hover ul {
    display: block;
  }
  
  .dropdown-menu li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
  }
  
  .dropdown-menu li a:hover {
    background-color: #f1f1f1;
  }

  上記のコードでは、

  position:relative; および position:absolute; を設定することにより、ドロップダウンは非表示になります。マウスオーバーすると、メニューが親メニューの下に表示されます。また、display: none; や display: block; を設定することでメニューの表示・非表示を切り替えることができます。

  上記のコード例を通じて、さまざまな種類の対話型ナビゲーション メニューを作成できます。もちろん、これらは基本的な例の一部にすぎず、ニーズに応じて拡張および変更して、Web サイトに合ったよりユニークなナビゲーション メニューを作成できます。美しく機能的なナビゲーション メニューの作成を頑張ってください。

以上がCSS Web ナビゲーション メニュー: さまざまなインタラクティブなナビゲーション メニューを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。