純粋な CSS を使用してセカンダリメニューを実装する方法を例で説明します。-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-07 18:13:25

オリジナル

1529 人が閲覧しました

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

HTML 構造の設計

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

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

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Services &#x25BC;</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

ログイン後にコピー

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

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

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 次メニューが表示された状態で表示されます。

完全なコード例

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

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Services &#x25BC;</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

ログイン後にコピー

rrree