純粋な CSS ドロップダウン メニューを作成するには?

純粋な CSS ドロップダウン メニューの作成

Web デザインの領域では、シームレスでユーザーフレンドリーなナビゲーション メニューを作成できます。最も重要です。さまざまなメニュー スタイルの中でも、ドロップダウン メニューは、ナビゲーション オプションをエレガントに整理して表示する機能で際立っています。この記事では、機能的であるだけでなく視覚的にも魅力的な純粋な CSS ドロップダウン メニューを作成する複雑な技術について詳しく説明します。

HTML 構造

HTML 構造基本的なドロップダウン メニューは比較的簡単です。まず、メニュー項目のコンテナとして機能する順序なしリスト (<ul>) から始めます。リスト内では、各メニュー項目はリスト項目 (

) で表されます。

HTML の例:

<ul>

CSS スタイリング

HTML 構造を機能的なドロップダウン メニューに変換するには、次のメソッドを使用します。 CSS スタイル:

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  display: block;
  position: relative;
  float: left;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}

ul li a:hover {
  background: #617F8A;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
}

li:hover a {
  background: #617F8A;
}

li:hover li a:hover {
  background: #95A9B1;
}

仕組み

初期スタイルでは、フォント、マージン、パディングなどのメニュー全体の外観を設定します。 li 要素のデフォルトの表示プロパティは block に設定されており、水平方向に表示できます。ドロップダウン サブメニューは、最初は表示プロパティを none に設定することで非表示になります。

ホバー状態は、position:Absolute を使用してサブメニューを表示し、親項目の下に揃えて表示するように定義されています。さらに、サブメニューの li 要素と a 要素はスタイルを継承して、一貫した外観を維持します。サブサブメニュー項目の上にマウスを置くと、背景色がさらに変化します。

結論

純粋な CSS ドロップダウン メニューを作成するには、慎重な HTML 構造化と思慮深い CSS スタイル設定が必要です。これらのテクニックを習得することで、Web デザイナーは、ユーザー エクスペリエンスを向上させ、創造性を発揮するエレガントで機能的なナビゲーション メニューの力を解き放つことができます。

以上が純粋な CSS ドロップダウン メニューを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。