純粋な CSS を使用してレスポンシブ ナビゲーション バーの折りたたみ効果を実装する手順

純粋な CSS を使用してレスポンシブ ナビゲーション バーの折りたたみ効果を実現する手順

現在、ほとんどの人がモバイル デバイスで Web を閲覧しているため、レスポンシブ デザインが重要な部分になっています。現代のウェブデザインの。レスポンシブ デザインでは、ナビゲーション バーは、さまざまな画面サイズで Web ページのナビゲーション構造を効果的に表示できる重要な要素です。

この記事では、純粋な CSS を使用して応答性の高いナビゲーション バーを実装し、小さな画面サイズで折りたたみ効果を実現する方法を紹介します。コード例は、読者が実装アプローチをよりよく理解するのに役立ちます。具体的な手順は次のとおりです。

ステップ 1: HTML 構造
最初にナビゲーション バーの HTML 構造を作成する必要があります。この例では、順序付きリスト (<ul></ul>) を使用して、ナビゲーション項目 (<li>) とリンク (<a></a>) を配置します。 ）。また、折りたたみエフェクトをトリガーするボタン (<button></button>) も追加しました。

<nav class="navbar">
  <button class="navbar-toggle"></button>
  <ul class="navbar-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

ステップ 2: CSS スタイル
次に、CSS を使用してナビゲーション バーのスタイルを定義します。背景色、固定幅、中央揃えをナビゲーション バーに追加します。また、間隔やホバー効果などのスタイルをナビゲーション項目に追加します。最も重要なことは、小さい画面サイズ向けに折りたたみ効果を定義したいということです。

.navbar {
  background-color: #333;
  width: 100%;
  text-align: center;
}

.navbar-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar-menu li {
  display: inline-block;
  margin: 0 10px;
}

.navbar-menu li a {
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
}

.navbar-menu li a:hover {
  background-color: #555;
}

.navbar-toggle {
  display: none;
}

ステップ 3: 応答性の折りたたみ効果
次に、小さな画面サイズでナビゲーション バーの折りたたみ効果を実現する必要があります。 CSS メディア クエリを使用して画面サイズを検出し、小さい画面サイズでのナビゲーション バーの折りたたみスタイルを定義します。また、CSS セレクター :checked および を使用して、折りたたみボタンのクリック イベントを実装する必要があります。

@media (max-width: 768px) {
  .navbar-menu {
    display: none;
  }

  .navbar-menu.show {
    display: block;
  }

  .navbar-toggle {
    display: block;
    background-image: url("menu-icon.png");
    background-size: cover;
    width: 30px;
    height: 30px;
  }

  .navbar-toggle:checked ~ .navbar-menu {
    display: block;
  }
}

上記のコードでは、メディア クエリ (@media) を使用して、画面サイズが 768 ピクセル以下かどうかを検出します。そうである場合、ナビゲーション バーは非表示になります ( 表示 : なし;)。また、画面サイズが 768 ピクセル以下の場合は、折りたたみボタンを表示し、その背景画像を設定します。折りたたみボタンをクリックすると、セレクター :checked (display: block;) を介してナビゲーション バーが表示されます。

これまでのところ、純粋な CSS を使用してレスポンシブ ナビゲーション バーの折りたたみ効果を実装するためのすべての手順が完了しました。上記のコード例を使用すると、モバイル デバイスに折りたたみ可能なレスポンシブ ナビゲーション バーを実装できます。

概要
レスポンシブ デザインは最新の Web デザインの重要な部分であり、ナビゲーション バーも重要な要素です。純粋な CSS とメディア クエリを使用することで、折りたたみ可能なレスポンシブ ナビゲーション バーを簡単に実装して、ユーザーに優れたモバイル ブラウジング エクスペリエンスを提供できます。この記事が、読者がこのテクノロジーをよりよく理解し、習得するのに役立つことを願っています。

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