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

#純粋な CSS を使用してメニュー ナビゲーション バーのフローティング効果を実装する手順

Web デザインの継続的な進歩に伴い、Web サイトに対するユーザーの要求はますます高くなっています。 。より良いユーザーエクスペリエンスを提供するために、サスペンション効果はウェブサイトのデザインで広く使用されています。この記事では、純粋な CSS を使用してメニュー ナビゲーション バーのフローティング効果を実現し、Web サイトの使いやすさと美しさを向上させる方法を紹介します。

基本的なメニュー構造の作成

まず、HTML ドキュメントでメニューの基本構造を作成する必要があります。以下は簡単な例です:

<nav class="menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">案例</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

基本スタイルの設定

CSS では、まず背景色やフォントなどのメニューの基本スタイルを設定する必要があります。スタイル、文字色など基本スタイルの例を次に示します。

.menu {
  background-color: #333;
  color: #fff;
  font-family: Arial, sans-serif;
}

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

.menu ul li {
  display: inline-block;
  margin-right: 10px;
}

.menu ul li a {
  text-decoration: none;
  color: #fff;
}

ホバー効果の追加

次に、メニューにホバー効果を追加します。メニュー項目の上にマウスを置くと、その背景色を変更したり、他のアニメーション効果を追加したりできます。以下はサスペンション エフェクトの簡単な例です。

.menu ul li:hover {
  background-color: #666;
}

.menu ul li a:hover {
  color: #ff0000; /*改变文字颜色*/
}

トランジション エフェクトを追加します

サスペンション エフェクトをよりスムーズにするために、次のトランジション プロパティを使用できます。グラデーション効果を実現する CSS。以下は、トランジション効果を追加する例です。

.menu ul li {
  transition: background-color 0.3s ease; /*过渡效果时间为0.3秒*/
}

.menu ul li a {
  transition: color 0.3s ease;  /*过渡效果时间为0.3秒*/
}

上記の手順により、メニュー ナビゲーション バーのフローティング効果を備えた Web サイトを実装できます。マウスをメニュー項目の上に置くと、背景色とテキストの色が変化し、ユーザーにアクティビティの感覚を与えます。

概要

純粋な CSS を使用してメニュー ナビゲーション バーのフローティング効果を実現すると、Web サイトの使いやすさと美しさを向上させることができます。基本的なスタイルを設定し、フローティング効果やトランジション効果を追加することで、Web サイトのメニューに動的な要素を追加し、ユーザーの注意を引き、ユーザー エクスペリエンスを向上させることができます。この記事の内容がお役に立てば幸いです。

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