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

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

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

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

HTML コード:

 菜单项 1 菜单项 2 菜单项 3 菜单项 4 

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 コード:

 菜单项 1 菜单项 2 菜单项 3 菜单项 4 

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 コード:

 下拉菜单 
 菜单项 1 菜单项 2 菜单项 3 
 

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