純粋な CSS を使用して影付きのメニューナビゲーションバーを実装する実装手順-CSSチュートリアル-php.cn

純粋な CSS を使用して影付きのメニューナビゲーションバーを実装する実装手順

王林

リリース： 2023-10-16 08:27:28

オリジナル

1275 人が閲覧しました

純粋な CSS を使用して影付きのメニューナビゲーションバーを実装する実装手順

純粋な CSS を使用して影付きのメニューナビゲーションバーを実装する手順には、特定のコード例が必要です。

Web デザインでは、メニューナビゲーションバーは非常に一般的な要素です。メニューナビゲーションバーに影効果を追加すると、外観が向上するだけでなく、ユーザーエクスペリエンスも向上します。この記事では、純粋な CSS を使用して影付きのメニューナビゲーションバーを実装し、参考として具体的なコード例を示します。

実装手順は次のとおりです。

HTML 構造の作成
まず、メニューナビゲーションバーに対応する基本的な HTML 構造を作成する必要があります。以下は簡単な例です:

<!DOCTYPE html>
<html>
<head>
  <title>带阴影效果的菜单导航栏</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</body>
</html>

ログイン後にコピー

CSS スタイルの追加
次に、CSS スタイルをスタイルシートファイル (style.css) に追加して、影効果メニューを実現する必要があります。ナビゲーションバー。完全な CSS コード例は次のとおりです。

.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

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

.menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

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

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

ログイン後にコピー

解析コード

まず、メニューナビゲーションバーコンテナーに .menu を追加しました。クラスを作成し、いくつかの基本的なスタイルを設定します。リストスタイルタイプを none に設定し、デフォルトのリスト項目スタイルを削除します。次に、影付きの box-shadow 効果をメニューナビゲーションバーコンテナーに適用しました。ここでのパラメータの意味は次のとおりです: 影を水平方向にオフセットしないように設定 (0px)、影を水平方向にオフセットしないように設定します。垂直方向。オフセットは 2 ピクセル (必要に応じて調整可能)、影のぼかし半径は 5 ピクセル、影の色は RGBA 値です。

次に、各 li リスト項目のスタイルを設定します。リスト項目が水平に配置されるように、display プロパティを inline-block に設定します。同時に、リスト項目間の間隔を制御するための margin-right 属性を追加しました。ここでは 10 ピクセルに設定していますが、必要に応じて調整できます。

次に、ブロックレベル要素としての表示、パディング、フォントの色と太さなど、各メニュー項目のリンクの基本スタイルを設定します。視覚化を改善するために、リンク上にマウスを置いたときに背景色を設定します。

最後に、メニューナビゲーションとの競合を避けるために、:first-child 疑似クラスセレクターを使用して、最初のリスト項目に margin-left 属性を設定します。 bar コンテナが離れすぎています。

結論
上記の手順により、影付きのメニューナビゲーションバーを実装することができました。必要に応じてカスタムスタイルを変更して、Web サイトのデザインに適合させることができます。純粋な CSS を使用すると、JavaScript に依存せずにさまざまなクールな効果を実現できます。この記事が皆さんのお役に立てれば幸いです、読んでいただきありがとうございます!

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