[CSSチュートリアル】ホバードロップダウンメニュー方式を実現するCSS
2022-02-02 09:30:11
いつものように今日は、マウスがボタンに移動すると自動的にドロップダウンメニューを表示する、とても便利なcss効果についてお話します。その効果は以下の通りです。
非常にシンプルで小さなデモで、以下の手順で実装されています。
まず、ボタンを包む大きな div と、その下にある 2 つの要素のスタイルを設定するリンクグループを定義します。リンクグループは、各パーツのホバー効果を設定するために非表示になっています。
/* .dropdown's hover effect, acting on .dropdown-content */
.dropdown:hover .dropdown-content {
display: block;
}
最後にソースコードを添付します。
<!DOCTYPE html>
<html>
<head>
<title>Dropdown menu example</title>
<meta charset="utf-8">
<style>
body {
margin: auto;
}
.dropbtn {
background-color: #4CAF50;
color: #fff;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
left: 47%;
/* declared as relative positioning, the following child elements can refer to this element */
position: relative;
display: inline-block;
}
.dropdown-content {
/* Hide the element */
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
/* .dropdown's hover effect on .dropdown-content */
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3dc741;
}
</style>
</head>
<body>
<h2 style="text-align: center;">dropdown menu</h2>
<p style="text-align: center;">Mouse over button to open dropdown menu</p>
<div class="dropdown">
<button class="dropbtn">dropdown</button>
<div class="dropdown-content">
<a href="#" target="_block">Hello World 1</a>
<a href="#" target="_block">Hello World 2</a>
<a href="#" target="_block">Hello World 3</a>
</div>
</div>
</body>
</html>
CSSでホバードロップダウンメニュー方式を実現するために、この記事を紹介し、より関連するCSSホバードロップダウンメニューの内容は、スクリプトホームの過去の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来的にもっとスクリプトホームをサポートして願っています!。
関連
-
[css3]css3は、3つの方法のサンプルコードのテキストの点滅効果を達成するために
-
[CSSチュートリアル】ネイティブCSSでテキストの無制限回転を実現する汎用的な方法
-
[CSSレイアウト例】CSSで中央揃えを実現する方法N種
-
[CSSチュートリアル】インタビュー必見!聖杯レイアウトとダブルウィングレイアウトの違いとは?
-
[css3]本のページをめくるような効果を実現するcss3サンプルコード
-
[CSSチュートリアル]適応的な幅と高さの矩形の16:9の例を達成するためのCSS
-
[css3]CSS3:overflowプロパティ
-
[CSSチュートリアル】CSS擬似クラス:empty makes my eyes shine(コード例)
-
[css3】background属性の8つの属性値について解説(インタビュー記事)
-
[CSSチュートリアル】CSSマージンの重なりと解決策を詳しく探る
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】CSSを解析して、画像のテーマカラー機能を抽出する(コツ)
-
[CSSチュートリアル】cssフレックスレイアウト ロング自動改行サンプルコード
-
[CSSチュートリアル】子要素のmargin-topが親要素の移動を引き起こす問題解決
-
[CSSチュートリアル】擬似要素で実現する中空三角矢印とXアイコンの例
-
[css3] CSS3を使ってヘッダーアニメーション効果を作成する
-
[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件
-
[Web標準チュートリアル】html5+CSS3コーディング規約
-
[CSSチュートリアル]アダプティブスクエアを実現するCSSの例
-
[css3]CSS3ベジェ曲線サンプル:リンクホバーアニメーション効果の作成
-
[css3]CSS3アニメーションによるグラフィックドロップ効果