ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS を使用して影付きのメニュー ナビゲーション バーを実装する実装手順
純粋な CSS を使用して影付きのメニュー ナビゲーション バーを実装する実装手順
- 王林オリジナル
- 2023-10-16 08:27:281260ブラウズ
純粋な 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 サイトの他の関連記事を参照してください。