純粋な CSS を使用してセカンダリ メニューを実装する方法を例で説明します。

Web サイトがますます複雑になるにつれて、ナビゲーション バーの重要性がますます高まっています。セカンダリ メニューは、ユーザーにより多くの選択肢を提供し、Web サイトの使いやすさと適応性を高めることができる一般的なナビゲーション バーのデザインです。したがって、Webサイトを構築する過程では、シンプルで使いやすいサブメニューの実装が不可欠です。この記事では、CSS を使用してセカンダリ メニューを実装する方法を学びます。

1. HTML 構造の設計

まず、HTML でナビゲーション バーの構造を設定する必要があります。これは CSS の実装にとって非常に重要です。

単純なナビゲーション バーの HTML 構造は次のとおりです。

<nav>
  <ul>
    <li><a>Home</a></li>
    <li>
      <a>Services ▼</a>
      <ul>
        <li><a>Web Design</a></li>
        <li><a>Web Development</a></li>
        <li><a>SEO</a></li>
      </ul>
    </li>
    <li><a>About Us</a></li>
    <li><a>Contact Us</a></li>
  </ul>
</nav>

この構造には、nav 要素と ul 要素が含まれています。 nav 要素は完全なナビゲーション バーをラップし、ul 要素にはナビゲーション バーの個々のリンクと、セカンダリ メニューを含むリンクが含まれます。

2 番目の li 要素には、セカンダリ メニューのコンテナである ul 要素が含まれていることに注意してください。次のステップで、このコンテナにスタイルを追加します。

2. CSS スタイルのデザイン

次に、セカンダリ メニューを実装するために、このナビゲーション バーの CSS スタイルを設定する必要があります。次のコードでは、まずデフォルトのスタイルを削除し、すべてのリンクに次のスタイルを設定します。

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 0.5em;
  color: #000;
  text-decoration: none;
  font-size: 1.2em;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
}

nav ul ul li {
  float: none;
  width: 100%;
}

nav li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul ul {
  top: 0;
  left: 100%;
}

このコード ブロックには次の部分が含まれています。

• 最初に削除します。デフォルトのスタイルが設定され、すべてのリンクの基本スタイルが設定されます。
• 次に、すべての li 要素に対して position:relative; を設定し、子要素を基準にして配置されるようにします。これは、子要素を介して配置できることを意味します。
• 各セカンダリ メニューは、個別の ul 要素に含まれています。これらの ul 要素には、位置決めや非表示など、いくつかの基本スタイルを設定します。
• 最後に、マウスホバー効果を追加しました。マウスを li 要素の上に置くと、その子要素の可視性が可視に変更されます。マウスが 2 番目のメニューの上にあると、それ自体とその子要素の表示設定が可視に変更されます。つまり、マウスがナビゲーション バー上にあるときは常に、すべての 2 次メニューが表示された状態で表示されます。

3. 完全なコード例

最終的に、完全な HTML と CSS コードは次のようになります:

<nav>
  <ul>
    <li><a>Home</a></li>
    <li>
      <a>Services ▼</a>
      <ul>
        <li><a>Web Design</a></li>
        <li><a>Web Development</a></li>
        <li><a>SEO</a></li>
      </ul>
    </li>
    <li><a>About Us</a></li>
    <li><a>Contact Us</a></li>
  </ul>
</nav>

rrree

4. 結論

この記事では、CSS を使用してセカンダリ メニューを実装する方法を学びました。 HTML 構造と CSS コードを説明し、読者がこの手法をよりよく理解できるように完全な例を提供します。この記事がお役に立てば幸いです!

以上が純粋な CSS を使用してセカンダリ メニューを実装する方法を例で説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。