ホームページ > 記事 > ウェブフロントエンド > CSSでドロップダウンメニューを実装する方法
CSSでドロップダウンメニューを実装する方法
- 醉折花枝作酒筹オリジナル
- 2021-04-22 10:44:2813206ブラウズ
方法: まず div 要素を使用してドロップダウン メニューのコンテンツを作成し、「display:none」スタイルを設定してそれを非表示にします。次に、ドロップダウン メニューを開く HTML 要素を作成します。最後に、「:hover」セレクターを使用して「display:block」スタイルを設定します。これは、マウスがドロップダウン ボタン上に移動したときにドロップダウン メニューを表示するために使用されます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
HTML 部分:
や
コンテナ要素 (
CSS 部分:
.dropdown クラスは、position:relative を使用します。これにより、ドロップダウン メニューのコンテンツがドロップダウン ボタンの右下隅に配置されるように設定されます (位置:絶対を使用)。
.dropdown-content クラスは、実際のドロップダウン メニューです。デフォルトでは非表示になっており、マウスが指定された要素に移動すると表示されます。 min-width 値が 160px に設定されていることに注意してください。好みに応じて変更できます。注: ドロップダウン コンテンツをドロップダウン ボタンと同じ幅に設定する場合は、幅を 100% に設定します (overflow:auto 設定により、小さな画面でスクロールできます)。
box-shadow 属性を使用して、ドロップダウン メニューを「カード」のように見せます。
:ホバー セレクターは、ユーザーがドロップダウン ボタンの上にマウスを移動したときにドロップダウン メニューを表示するために使用されます。
コード:
<!DOCTYPE html>
<html>
<head>
<title>document</title>
<meta charset="utf-8">
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<span>鼠标移动到这里，会出现下拉列表</span>
<div class="dropdown-content">
<p>表单一</p>
<p>表单一</p>
</div>
</div>
</body>
</html> 効果:
推奨学習: css ビデオ チュートリアル
以上がCSSでドロップダウンメニューを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。