方法-ドロップアップ
CSSを使用してドロップアップメニューを作成する方法を学びます。
ドロップアップ
ドロップアップメニューは、ユーザーが事前定義されたリストから1つの値を選択できるようにする切り替え可能なメニューです。
ホバー可能なドロップアップを作成する
ユーザーが要素の上にマウスを移動したときに表示されるドロップアップメニューを作成します。
ステップ1)HTMLを追加します。
例
<div class="dropup">
<button class="dropbtn">Dropup</button>
<div class="dropup-content">
<a href="#">Link
1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
例の説明
<button>、<a>、<p>要素など、任意の要素を使用してドロップアップメニューを開きます。
コンテナ要素(<div>など)を使用してドロップアップメニューを作成し、その中にドロップアップリンクを追加します。
ボタンと<div>の周りに<div>要素をラップして、CSSでドロップアップメニューを正しく配置します。
ステップ2)CSSを追加します。
例
/* Dropup Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The
container <div> - needed to position the dropup content */
.dropup {
position: relative;
display:
inline-block;
}
/* Dropup content (Hidden by Default) */
.dropup-content {
display: none;
position:
absolute;
bottom: 50px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the
dropup */
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropup links on hover */
.dropup-content a:hover {background-color: #ddd}
/* Show the
dropup menu on hover */
.dropup:hover .dropup-content {
display: block;
}
/* Change the background color of the dropup button when the
dropup content is shown */
.dropup:hover .dropbtn {
background-color: #2980B9;
}
例の説明
ドロップアップボタンのスタイルを背景色、パディングなどで設定しました。
.dropup
クラスはを使用します。position:relative
これは、ドロップアップコンテンツをドロップアップボタンの上に配置する場合に必要です(を使用position:absolute
)。
クラスは実際の.dropup-content
ドロップアップメニューを保持します。デフォルトでは非表示になっており、ホバーすると表示されます(以下を参照)。min-width
が160pxに設定されていることに注意してください。これを自由に変更してください。ヒント:ドロップアップコンテンツの幅をドロップアップボタンと同じ幅にしたい場合は、width
を100%に設定します(overflow:auto
小さな画面でスクロールを有効にします)。
境界線を使用する代わりに、box-shadow
プロパティを使用してドロップアップメニューを「カード」のように見せています。また、z-indexを使用して、ドロップアップを他の要素の前に配置します。
セレクターは、:hover
ユーザーがドロップアップボタンの上にマウスを移動したときにドロップアップメニューを表示するために使用されます。