CSS ドロップダウンメニュー
CSSを使って、簡単にドロップダウンメニューを作成することができます。
サンプルコード
HTML構造
<ul class="dropdown-menu">
<li><a href="#">メニュー1</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">メニュー2</a>
<ul class="dropdown-content">
<li><a href="#">サブメニュー1</a></li>
<li><a href="#">サブメニュー2</a></li>
<li><a href="#">サブメニュー3</a></li>
</ul>
</li>
<li><a href="#">メニュー3</a></li>
</ul>
CSSスタイル
/* メインメニューバーのスタイル */
.dropdown-menu {
list-style: none; /* リストのマーカーを削除 */
padding: 0; /* パディングをゼロに設定 */
margin: 0; /* マージンをゼロに設定 */
background-color: #333; /* 背景色を設定 */
display: flex; /* メニューアイテムを水平に並べる */
}
/* メニューアイテムの相対位置 */
.dropdown-menu li {
position: relative;
}
/* メニューアイテムのリンクスタイル */
.dropdown-menu li a {
display: block; /* ブロック要素に設定 */
padding: 10px; /* パディングを追加 */
text-decoration: none; /* テキストの下線を削除 */
color: white; /* テキスト色を白に設定 */
}
/* メニューアイテムのホバー時の背景色 */
.dropdown-menu li a:hover {
background-color: #444;
}
/* ドロップダウンメニューの基本スタイル */
.dropdown-content {
display: none; /* 最初は非表示に設定 */
position: absolute; /* 絶対位置を設定 */
top: 100%; /* 親要素の下端に配置 */
left: 0; /* 親要素の左端に配置 */
background-color: #333; /* 背景色を設定 */
list-style: none; /* リストのマーカーを削除 */
padding: 0; /* パディングをゼロに設定 */
min-width: 160px; /* 最小幅を設定 */
z-index: 1; /* z-indexを1に設定 */
}
/* ドロップダウンメニュー内のリンクスタイル */
.dropdown-content li a {
display: block; /* ブロック要素に設定 */
padding: 10px; /* パディングを追加 */
text-decoration: none; /* テキストの下線を削除 */
color: white; /* テキスト色を白に設定 */
}
/* ドロップダウンメニュー内のリンクホバー時の背景色 */
.dropdown-content li a:hover {
background-color: #444;
}
/* ドロップダウンメニューの表示切り替え */
.dropdown:hover .dropdown-content {
display: block; /* 親要素にホバー時に表示 */
}
このコードでは、dropdown-menu
クラスを持つul
要素がメインメニューで、その中にdropdown
クラスを持つli
要素がドロップダウンメニューを表します。
サブメニューは、dropdown-content
クラスを持つul
要素で定義しています。
CSSでドロップダウンメニューの表示/非表示を切り替えるために、:hover
擬似クラスを使用しています。
このマニュアルを参考に、独自のドロップダウンメニューを作成してみてください。
おまけ
画像の上にマウスを移動すると、ドロップダウンコンテンツが表示されます。
CODINGHAKU
<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);
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
<div class="dropdown">
<img src="画像.png" width="100">
<div class="dropdown-content">
<img src="画像.png" width="400">
<div class="desc">CODINGHAKU</div>
</div>
</div>
コメント