CSS ナビゲーション バー メニュー デザイン: 複数のナビゲーション バー メニュー スタイルをデザインします。

CSS ナビゲーション バー メニュー デザイン: 複数のナビゲーション バー メニュー スタイルをデザインするには、特定のコード例が必要です

ナビゲーション バーは、さまざまなスタイルやスタイルを通じて、Web サイト インターフェイスの重要な部分です。ユーザーにシンプルで直感的なナビゲーションを提供できるレイアウト。この記事では、さまざまな CSS ナビゲーション バー メニューのデザイン スタイルを紹介および提供し、対応するコード例を示します。

1. 垂直ナビゲーション バー メニュー:
   垂直ナビゲーション バー メニューは通常、Web ページの横または上部に表示され、より大きな幅を占め、より多くのナビゲーション オプションに対応できます。垂直ナビゲーション バー メニューを実装するコードは次のとおりです。

HTML コード:

<div class="vertical-menu">
  <a href="#">菜单项 1</a>
  <a href="#">菜单项 2</a>
  <a href="#">菜单项 3</a>
  <a href="#">菜单项 4</a>
</div>

CSS コード:

.vertical-menu {
  width: 200px;
}

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

.vertical-menu a:hover {
  background-color: #ccc;
}

2. 水平ナビゲーション バー メニュー:
   水平ナビゲーション バー メニューは通常、Web ページの上部または下部に表示され、行の幅を占め、さまざまなページへの素早いナビゲーションを可能にします。水平ナビゲーション バー メニューを実装するコードは次のとおりです。

HTML コード:

<div class="horizontal-menu">
  <a href="#">菜单项 1</a>
  <a href="#">菜单项 2</a>
  <a href="#">菜单项 3</a>
  <a href="#">菜单项 4</a>
</div>

CSS コード:

.horizontal-menu {
  display: flex;
}

.horizontal-menu a {
  flex: 1;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #000;
}

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

3. ドロップダウン メニュー:
   ドロップダウン メニューは、一般的なナビゲーション バーのメニュー スタイルで、関連するメニュー項目のグループをドロップダウン ボックスに非表示にすることで、より多くのナビゲーション オプションを提供します。ドロップダウン メニューを実装するコードは次のとおりです。

HTML コード:

<div class="dropdown-menu">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">菜单项 1</a>
    <a href="#">菜单项 2</a>
    <a href="#">菜单项 3</a>
  </div>
</div>

CSS コード:

.dropdown-menu {
  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);
}

.dropdown-content a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.dropdown-menu:hover .dropdown-content {
  display: block;
}

上記のコード例を通じて、次のようになります。垂直ナビゲーション バー メニュー、ナビゲーション バー メニューおよびドロップダウン メニューの水平スタイル効果を実装しました。背景色、フォント スタイル、ナビゲーション オプションのレイアウトなどを変更するなど、独自のニーズに応じてスタイルをさらに最適化および調整できます。

概要:
CSS ナビゲーション バー メニューのデザインは Web 開発の基本部分であり、さまざまなスタイルやレイアウトを通じて、ユーザーに優れたナビゲーション エクスペリエンスを提供できます。この記事で紹介した垂直ナビゲーション バー メニュー、水平ナビゲーション バー メニュー、およびドロップダウン メニューのコード例を通じて、さまざまなナビゲーション バー スタイルを簡単に実装し、必要に応じてカスタマイズできます。この記事があなたのWebデザインの仕事に役立つことを願っています。

以上がCSS ナビゲーション バー メニュー デザイン: 複数のナビゲーション バー メニュー スタイルをデザインします。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。