純粋な CSS を使用してレスポンシブ ナビゲーション バーのドロップダウン タブ効果を実装する手順

純粋な CSS を使用してレスポンシブ ナビゲーション バーのドロップダウン タブ効果を実装する手順

ナビゲーション バーは Web デザインの一般的な要素であり、レスポンシブ デザインを使用します。ナビゲーション バーは、さまざまな画面サイズで適切に表示され、動作します。この記事では、純粋な CSS を使用して、ドロップダウン タブ効果を持つレスポンシブ ナビゲーション バーを実装する方法を紹介します。

ステップ 1: HTML 構造を準備する
まず、基本的な HTML 構造を準備する必要があります。ナビゲーション バーは通常、順序なしリスト (<ul></ul>) を使用し、各ナビゲーション項目はリスト項目 (<li>) でラップされます。ドロップダウン タブでは、リスト項目内にネストされた順序なしリストを追加する必要があります。

<nav class="navbar">
  <ul class="nav-list">
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul class="dropdown">
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
        <li><a href="#">产品3</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

ステップ 2: 基本スタイルを設定する
レスポンシブ効果を実現するには、CSS メディア クエリを使用して、さまざまな画面サイズでナビゲーション バーの表示モードを設定する必要があります。同時に、ナビゲーション バーとドロップダウン タブの基本スタイルを設定する必要もあります。

.navbar {
  background-color: #333;
  height: 50px;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-list li {
  position: relative;
}

.nav-list li a {
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
  line-height: 50px;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  width: 100%;
}

.dropdown li {
  width: 100%;
}

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

ステップ 3: レスポンシブ スタイルを設定する
メディア クエリでは、さまざまな画面サイズに応じてナビゲーション バーの表示モードを設定できます。画面の幅が狭い場合は、水平スクロール バーを使用してナビゲーション オプションを表示できます。画面幅が大きい場合は、ドロップダウンタブを使用して表示できます。

@media screen and (max-width: 768px) {
  .nav-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .nav-list li {
    white-space: nowrap;
  }
  
  .nav-list li a {
    display: inline-block;
  }
  
  .dropdown {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .nav-list li:hover .dropdown {
    display: block;
  }
}

上記の 3 つの手順を通じて、ドロップダウン タブ効果を備えた応答性の高いナビゲーション バーを実装できます。小さい画面では、ナビゲーション オプションは水平にスクロールしますが、大きい画面では、ナビゲーション項目の上にマウスを置くとドロップダウン タブが表示されます。

このようなナビゲーション バーのデザインは強力であるだけでなく、ユーザー エクスペリエンスも優れており、ユーザーはさまざまなデバイスで Web ページを簡単に閲覧および操作できます。 CSS メディア クエリを柔軟に使用することで、レスポンシブ デザインでより多くの要素の動的な効果を実現できます。

以上が純粋な CSS を使用してレスポンシブ ナビゲーション バーのドロップダウン タブ効果を実装する手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。