ナビゲーションバー設定CSS

Web 開発者として、美しく実用的なページ ナビゲーション バーをデザインする必要があることがよくあります。 HTML では、<ul></ul> タグと <li> タグを使用して基本的なナビゲーション バーを作成できますが、スタイルやインタラクティブな効果を追加したい場合は、 CSSを使用して完成させます。

この記事では、単純なスタイルから複雑な効果まで、CSS を使用してナビゲーション バーをデザインする方法を段階的に紹介します。

基本スタイル

まず、簡単なナビゲーション バーを作成しましょう。 HTML コードでは、<ul></ul> タグと <li> タグを使用して順序なしリストを作成し、CSS を使用してリストのスタイル、サイズ、属性などの属性を設定します。 color、次のように:

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

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #333;
}

.nav li {
  margin: 0;
}

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

上記のスタイル設定により、以下に示すような単純なナビゲーション バーが得られます:

ホバー効果

次に、シンプルで実用的なホバー効果を追加します。これにより、マウス ポインターがナビゲーション バー上にあるときに、背景色やテキストの色などの属性を変更することでユーザーの視覚効果を高めることができます。これは、次のように :hover 疑似クラスを設定することで実現できます。

.nav a:hover {
  background-color: #555;
  color: #fff;
}

上記のコードは、ユーザーがマウス ポインターをナビゲーション リンク上に置くと、リンクの背景色が # に変わることを意味します。 555 の場合、文字は白になります。完成した効果は次のとおりです。

下線効果

達成される次の効果は、ユーザーがナビゲーション バーのリンクの上にマウスを移動すると、リンクが表示されることです。リンクの下に表示されます。下線効果です。これは比較的一般的な効果であり、ユーザーは現在どのナビゲーション リンクを選択しているかをより明確に知ることができます。

これを実現するには、リンクの下の前に疑似要素: を追加します。ユーザーがリンク上にマウスを移動すると、疑似要素が表示され、下の境界線の長さが長くなります。コードは次のとおりです。

.nav a:hover:before {
  content:'';
  display: block;
  border-bottom: 4px solid #fff;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.nav a:hover:before {
  transform: scaleX(1);
}

上記のコードは、マウス ポインターがナビゲーション リンク上にあると、疑似要素が表示され、要素の移動、回転、スケーリングなどのアニメーション効果が表示されることを示しています。は、transform 属性を通じて設定されます。完成した効果は次のとおりです。

スライド効果

次に達成される効果は、ユーザーがナビゲーション リンクを選択すると、スライド インジケーターが表示されることです。ナビゲーション バーの下 デバイスの効果。この効果により、ユーザーは選択したナビゲーション リンクがどこにあるのかをより明確に知ることができます。

これを行うには、インジケーター コンテナーとインジケーターの子要素を作成します。ユーザーがナビゲーション リンクを選択すると、インジケーターがある位置から別の位置にスライドします。コードは次のとおりです。

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
  <div class="indicator"></div>
</ul>

.indicator {
  height: 4px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all .3s ease-in-out;
}

.nav li:first-child .indicator {
  width: 80px;
  transform: translateX(0);
}

.nav li:nth-child(2) .indicator {
  width: 70px;
  transform: translateX(80px);
}

.nav li:nth-child(3) .indicator {
  width: 60px;
  transform: translateX(150px);
}

.nav li:last-child .indicator {
  width: 110px;
  transform: translateX(210px);
}

.nav a:hover + .indicator {
  width: 100%;
  transform: translateX(0);
}

上記のコードは、ユーザーがナビゲーション リンクを選択すると、対応するインジケーターがリンクの下にスライドすることを意味します。さまざまなリンクに対応するインジケーターの幅と応答オフセットを設定することで、さまざまなスライド効果を実現できます。完成した効果は次のとおりです。

概要

この記事では、CSS を使用して、基本スタイルやホバー効果など、さまざまな種類のナビゲーション バーを作成する方法を紹介します。 , 下線効果やスライド効果など。これらの効果により、ユーザーのインタラクティブなエクスペリエンスが向上し、ページがより美しく、使いやすくなります。継続的な学習と実践を通じて、ページのデザインと効果を継続的に改善し、ユーザーにより良いエクスペリエンスを提供することができます。

以上がナビゲーションバー設定CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。