小白教程
所有教程
关于
Search
172.71.254.25
172.71.254.25
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS 下拉菜单”的源代码
本页内容
上一节:
CSS_导航栏
下一节:
CSS_提示工具(Tooltip)
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS 下拉菜单}}[[Category:CSS 教程|28]] = CSS 下拉菜单 = 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。 == 下拉菜单实例 == === 实例演示 1 === 文本下拉菜单 小白教程 www.xiaobai.wang === 实例演示 2 === 下拉菜单 [javascript:void(0) 小白教程 1] [javascript:void(0) 小白教程 2] [javascript:void(0) 小白教程 3] === 实例演示 3 === 学习使人快乐! == 基本下拉菜单 == 当鼠标移动到指定元素上时,会出现下拉菜单。 == <sample title="" desc="" lang="html" hererun="1"> <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> [mycode3] [mycode3 type="html"] <div class="dropdown"> <span>鼠标移动到我这!</span> <div class="dropdown-content"> <p>小白教程</p> <p>www.xiaobai.wang</p> </div> </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>下拉菜单实例|小白教程(xiaobai.wang)</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> <h2>鼠标移动后出现下拉菜单</h2> <p>将鼠标移动到指定元素上就能看到下拉菜单。</p> <div class="dropdown"> <span>鼠标移动到我这!</span> <div class="dropdown-content"> <p>小白教程</p> <p>www.xiaobai.wang</p> </div> </div> </body> </html> </run> === 实例解析 === '''HTML 部分:''' 我们可以使用任何的 HTML 元素来打开下拉菜单,如:<span>, 或 a <button> 元素。 使用容器元素 (如: <div>) 来创建下拉菜单的内容,并放在任何你想放的位置上。 使用 <div> 元素来包裹这些元素,并使用 CSS 来设置下拉内容的样式。 '''CSS 部分:''' <code>.dropdown</code> 类使用 <code>position:relative</code>, 这将设置下拉菜单的内容放置在下拉按钮 (使用 <code>position:absolute</code>) 的右下角位置。 <code>.dropdown-content</code> 类中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。 注意 <code>min-width</code> 的值设置为 160px。你可以随意修改它。 '''注意:''' 如果你想设置下拉内容与下拉按钮的宽度一致,可设置 <code>width</code> 为 100% ( <code>overflow:auto</code> 设置可以在小尺寸屏幕上滚动)。 我们使用 <code>box-shadow</code> 属性让下拉菜单看起来像一个"卡片"。 <code>:hover</code> 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。 == 下拉菜单 == 创建下拉菜单,并允许用户选取列表中的某一项: 下拉菜单 [[void(0)|小白教程 1]] [[void(0)|小白教程 2]] [[void(0)|小白教程 3]] 这个实例类似前面的实例,当我们在下拉列表中添加了链接,并设置了样式: == <sample title="" desc="" lang="html" hererun="1"> <style> /* 下拉按钮样式 */ .dropbtn { background-color: #4CAF50; 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: #f1f1f1} /* 在鼠标移上去后显示下拉菜单 */ .dropdown:hover .dropdown-content { display: block; } /* 当下拉内容显示后修改下拉按钮的背景颜色 */ .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> <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> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>下拉菜单实例|小白教程(xiaobai.wang)</title> <meta charset="utf-8"> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .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: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> </head> <body> <h2>下拉菜单</h2> <p>鼠标移动到按钮上打开下拉菜单。</p> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="http://www.xiaobai.wang">小白教程 1</a> <a href="http://www.xiaobai.wang">小白教程 2</a> <a href="http://www.xiaobai.wang">小白教程 3</a> </div> </div> </body> </html> </run> == 下拉内容对齐方式 == === float:left; === 左 [[void(0)|小白教程 1]] [[void(0)|小白教程 2]] [[void(0)|小白教程 3]] === float:right; === 右 [[void(0)|小白教程 1]] [[void(0)|小白教程 2]] [[void(0)|小白教程 3]] 如果你想设置右浮动的下拉菜单内容方向是从右到左,而不是从左到右,可以添加以下代码 <code>right: 0;</code> == <sample title="" desc="" lang="html" hererun="1"> .dropdown-content { right: 0; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>下拉菜单实例|小白教程(xiaobai.wang)</title> <meta charset="utf-8"> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; right: 0; 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: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> </head> <body> <h2>下拉内容的对齐方式</h2> <p>left 和 right 属性指定了下拉内容是从左到右或从右到左。</p> <div class="dropdown" style="float:left;"> <button class="dropbtn">左</button> <div class="dropdown-content" style="left:0;"> <a href="#">小白教程 1</a> <a href="#">小白教程 2</a> <a href="#">小白教程 3</a> </div> </div> <div class="dropdown" style="float:right;"> <button class="dropbtn">右</button> <div class="dropdown-content"> <a href="#">小白教程 1</a> <a href="#">小白教程 2</a> <a href="#">小白教程 3</a> </div> </div> </body> </html> </run> == 更多实例 == [[tryit.php?filename=trycss_dropdown_image|图片下拉]] 该实例演示了如何如何在下拉菜单中添加图片。 [[tryit.php?filename=trycss_dropdown_navbar|导航条下拉]] 该实例演示了如何在导航条上添加下拉菜单。
返回至“
CSS 下拉菜单
”。
上一节:
CSS_导航栏
下一节:
CSS_提示工具(Tooltip)