CSSドロップダウンメニュー
CSS を使用して、マウスを上に移動したときにドロップダウン メニューを表示するエフェクトを作成します。
ドロップダウン メニューの例:
マウスを指定した要素の上に移動すると、ドロップダウン メニューが表示されます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style type="text/css"> ul,ol,li {list-style:none;padding:0px;margin:0px;} #menu * {line-height:30px;z-index:10;} #menu a { text-decoration:none; display:block; } #menu ul { text-align:left; background:#333; } #menu .arrow /* 菜单项的右侧小箭头 */ { float:right; padding-right:5px; } #menu li:hover>ul {display:block;} #menu>ul{height:30px;} /* 即使没有菜单项也能保持顶级菜单栏的高度。 */ /* 一级菜单 */ #menu>ul>li { text-align:center; display:inline-block; width:80px; } #menu>ul>li>a {color:#fff;} #menu>ul>li:hover {background:#666;} /* 下拉的菜单栏 */ #menu>ul>li ul { display:none; width:150px; position:absolute; background:#c1cd94; box-shadow:2px 2px 2px #000; -webkit-box-shadow:2px 2px 2px #000; -moz-box-shadow:2px 2px 2px #123; } /* 下拉菜单的菜单项 */ #menu>ul>li>ul li {padding-left:5px; position:relative;} #menu>ul>li>ul li>a {color:#000;} #menu>ul>li>ul li:hover {background:#d3dbb3;} </style> <body> <div id="menu"> <ul> <li><a href="">菜单一</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a> <ul><li><a href="">子菜单7</a></li></ul> </li> <li><a href="">子菜单3</a></li> </ul> </li> <li><a href="">菜单二</a> <ul> <li><a href="">子菜单4</a></li> <li><a href="">子菜单5</a></li> <li><a href="">子菜单6</a></li> </ul> </li> </ul> </div> </body> </html>
ドロップダウン メニューを作成し、ユーザーがリスト内の項目を選択できるようにします:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style type="text/css"> /* 下拉按钮样式 */ .dropbtn { background-color: black; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* 容器 <div> - 需要定位下拉内容 */ .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-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* 鼠标移上去后修改下拉菜单链接颜色 */ .dropdown-content a:hover {background-color: yellow;} /* 在鼠标移上去后显示下拉菜单 */ .dropdown:hover .dropdown-content { display: block; } /* 当下拉内容显示后修改下拉按钮的背景颜色 */ .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> <body> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜单栏 1</a> <a href="#">菜单栏 2</a> <a href="#">菜单栏 3</a> </div> </div> </body> </html>
注:
HTML 部分:使用できますドロップダウン メニューを開くための任意の H TM 要素 ( など)、または
コンテナ要素 (<div> など) を使用してドロップダウン メニューのコンテンツを作成し、任意の場所に配置します。
<div> 要素を使用してこれらの要素をラップし、CSS を使用してドロップダウン コンテンツのスタイルを設定します。
CSS 部分:
.dropdown クラスは、position:relative を使用します。これにより、ドロップダウン メニューのコンテンツがドロップダウン ボタンの右下隅に配置されるように設定されます (position:absolute を使用)。
.dropdown-content クラスは、実際のドロップダウン メニューです。デフォルトでは非表示になっており、マウスが指定された要素に移動すると表示されます。 min-width 値が 160px に設定されていることに注意してください。好みに応じて変更できます。注: ドロップダウン コンテンツをドロップダウン ボタンの幅と一致するように設定したい場合は、幅を 100% に設定できます (overflow:auto 設定により、小さな画面サイズでもスクロールできます)。
box-shadow 属性を使用して、ドロップダウン メニューを「カード」のように見せます。