純粋な CSS を使用してレスポンシブ ナビゲーション バーのフローティング効果を実装する手順

純粋な CSS を使用してレスポンシブ ナビゲーション バーのフローティング効果を実装する手順

前書き:
モバイル インターネットの急速な発展に伴い、レスポンシブ デザインが主流になりましたWeb ページのデザインの重要な特徴。レスポンシブ デザインでは、ナビゲーション バーは重要なコンポーネントです。この記事では、純粋な CSS を使用してレスポンシブ ナビゲーション バーのフローティング効果を実現する方法を紹介します。これにより、ナビゲーション バーがさまざまなデバイスに自動的に適応し、フローティング効果が得られます。

ステップ 1: HTML 構造

まず、ナビゲーション バーの要素を含む基本的な HTML 構造を準備する必要があります。以下は、基本的なナビゲーション バーの構造の例です。

<nav>
  <ul>
    <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 スタイルをナビゲーション バーに追加し、ナビゲーション バーを設定する必要があります。浮遊効果。以下は基本的な CSS スタイルの例です。

nav {
  background-color: #f0f0f0;
}

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

nav ul li {
  display: inline-block;
}

nav ul li a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #ccc;
}

上記の CSS スタイルを通じて、ナビゲーション バーの背景色、フォント スタイルなどを設定し、ナビゲーション バーにフローティング効果を追加します。

ステップ 3: レスポンシブ デザイン

レスポンシブ デザインを実現するには、メディア クエリ (メディア クエリ) を使用して、さまざまな画面サイズでナビゲーション バーの表示モードを設定する必要があります。以下は基本的なメディア クエリの例です:

@media screen and (max-width: 768px) {
  nav ul {
    display: none;
  }
  
  nav ul li {
    display: block;
  }
}

上記のメディア クエリでは、画面幅が 768 ピクセル未満の場合、ナビゲーション バーのリストが非表示になり、各ナビゲーション項目が独立した垂直リストとして表示されます。 。

ステップ 4: ホバー効果

サスペンション効果を実現するには、CSS 擬似クラス:hover を使用します。以下は、ホバー効果の CSS スタイルの例です。

nav ul li:hover {
  background-color: #ccc;
}

nav ul li:hover a {
  color: #fff;
}

上記の CSS スタイルでは、ナビゲーション バーの各ナビゲーション項目の上にマウスを置くと、背景色が #ccc に変わり、文字色は白になります。

要約すると、上記の手順により、純粋な CSS 応答型ナビゲーション バーのフローティング効果を実現することができました。このアプローチにより、ナビゲーション バーをさまざまなデバイスに簡単に適応させ、ユーザーにより良いユーザー エクスペリエンスを提供できます。

この記事がお役に立てば幸いです。読んでいただきありがとうございます。

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