CSS Web ナビゲーションメニュー: さまざまなインタラクティブなナビゲーションメニューを作成します-CSSチュートリアル-php.cn

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

WBOY

リリース： 2023-11-18 12:57:22

オリジナル

862 人が閲覧しました

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 サイトの他の関連記事を参照してください。