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

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

このデジタル時代において、Web サイトは人々が情報を入手するための主要なチャネルとなっています。そしてコミュニケーションをとる。より良いユーザーエクスペリエンスを提供するために、Web サイト開発ではレスポンシブデザインがますます普及しています。この記事では、純粋な CSS を使用してレスポンシブ ナビゲーション バーのドロップダウン ボックス効果を実装する方法を学びます。

ステップ 1: HTML 構造
まず、ナビゲーション バーを構築するための基本的な HTML 構造を作成する必要があります。基本的な構造は次のとおりです。

<nav class="navbar">
  <div class="navbar-brand">Logo</div>
  <input type="checkbox" id="toggle" class="toggle-checkbox">
  <label for="toggle" class="toggle-label">
    <span class="toggle-icon"></span>
  </label>
  <ul class="navbar-menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
    <li>菜单项4</li>
    <li>菜单项5</li>
  </ul>
</nav>

この構造には、ナビゲーション バー ブランド (navbar-brand) を含むクラス navbar を持つナビゲーション バー コンテナーがあります。 、ナビゲーションバー メニューの表示/非表示を切り替えるチェックボックス (toggle-checkbox) とラベル (toggle-label)、および navbar-menu 順序なしクラスのリスト (ul) は、ナビゲーション メニュー項目を表示するために使用されます。

ステップ 2: CSS スタイル
次に、ナビゲーション バーの CSS スタイルを作成して、さまざまな画面サイズでさまざまな効果を与えます。以下は基本的な CSS スタイルで、必要に応じて変更できます。

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.navbar-brand {
  font-size: 20px;
}

.toggle-label {
  display: none;
  cursor: pointer;
}

.toggle-icon {
  display: inline-block;
  width: 30px;
  height: 5px;
  background-color: #fff;
  margin-bottom: 5px;
}

.navbar-menu {
  display: flex;
  list-style-type: none;
}

.navbar-menu li {
  margin-left: 10px;
}

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

  .toggle-label {
    display: inline-block;
  }

  .toggle-checkbox:checked ~ .navbar-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 45px;
    background-color: #333;
    width: 100%;
  }

  .toggle-checkbox:checked ~ .navbar-menu li {
    margin-left: 0;
  }
}

この CSS スタイルでは、ナビゲーション バーの背景色、フォント色、行間隔などを設定します。また、チェックボックス (.toggle-checkbox) とドロップダウン メニュー (.navbar-menu) を非表示にし、対応するメディア クエリでの表示/非表示を設定します。

ステップ 3: 効果の完成
上記の HTML 構造と CSS スタイルにより、純粋な CSS を使用したレスポンシブ ナビゲーション バーのドロップダウン ボックス効果が完成しました。ブラウザを通じて効果をプレビューでき、さまざまな画面サイズで、チェックボックスをクリックするとメニュー項目が表示または非表示になります。

概要
純粋な CSS を使用してレスポンシブ ナビゲーション バーのドロップダウン ボックス効果を実装するのは複雑ではなく、単純な HTML 構造と対応する CSS スタイルだけで実現できます。このようにして、Web サイト ユーザーにより便利なナビゲーション エクスペリエンスを提供し、さまざまなデバイスで適切に表示されるようにすることができます。この記事が、純粋な CSS を使用してレスポンシブ ナビゲーション バーのドロップダウン ボックス効果を実装する方法を理解するのに役立つことを願っています。コーディングを楽しんでください!

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