下拉菜单
来源:互联网 发布:数据标准大会 编辑:程序博客网 时间:2024/05/22 14:29
基本下拉菜单
当鼠标移动到指定元素上时,会出现下拉菜单。
我们可以使用任何的 HTML 元素来打开下拉菜单,如:, 或 a 元素。
使用容器元素 (如:
) 来创建下拉菜单的内容,并放在任何你想放的位置上。
使用
使用
元素来包裹这些元素,并使用 CSS 来设置下拉内容的样式。
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致,可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
我们使用 box-shadow 属性让下拉菜单看起来像一个”卡片”。
:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致,可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
我们使用 box-shadow 属性让下拉菜单看起来像一个”卡片”。
:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style >.dropdown{ position:relative; display: inline-block;}/*.dropdown-content 类中是实际的下拉菜单。默认是隐藏的*//*鼠标移动到指定元素后会显示*//*想设置下拉内容与下拉按钮的宽度一致,可设置 width 为 100%overflow:auto 设置可以在小尺寸屏幕上滚动box-shadow 属性让下拉菜单看起来像一个"卡片":hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单*/.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.runoob.com</p> </div></div></body></html>
下拉菜单
并允许用户选取列表中的某一项
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style >/* 容器 <div> - 需要定位下拉内容 */.dropdown{ position:relative; display: inline-block;}/*.dropdown-content 类中是实际的下拉菜单。默认是隐藏的*//*鼠标移动到指定元素后会显示*//*想设置下拉内容与下拉按钮的宽度一致,可设置 width 为 100%overflow:auto 设置可以在小尺寸屏幕上滚动box-shadow 属性让下拉菜单看起来像一个"卡片":hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单*//* 下拉内容 (默认隐藏) */.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-content a{ color:black; padding:12px 16px; text-decoration:none; display:block;}/* 下拉按钮样式 */.dropbtn{ background-color:#4CAF50 ; color:white; padding: 16px; font-size:16px; border:none; /*光标形状设置 pointer是手型*/ cursor:pointer;}/*鼠标移上去后显示的下拉菜单的颜色*/.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="#">菜鸟教程 1</a> <a href="#">菜鸟教程 2</a> <a href="#">菜鸟教程 3</a> </div></div></body></html>
阅读全文
0 0
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- 下拉菜单
- Android 近期知识总结
- Taking Solr to Production讨论创建solr应用
- OpenCV_Python 学习笔记(二)图像的基本操作
- 两种约瑟夫环的非递归解决方法
- 删除空格:删除字符串首部和尾部连续的空格
- 下拉菜单
- 考研英语
- 导航条上的下拉菜单
- 关于codeblocks提示使用无效编译器问题
- 【MongoDB】配置shard集群 完整教程
- Super A^B mod C
- 欧拉函数的两种基本写法
- 斯特林公式及应用
- 过去六十年的回顾,感叹微积分之巨变