使用 CSS 可以创建一个鼠标移入后显示下拉菜单的效果。
1、下拉菜单的实现
当鼠标移入指定元素时,显示下拉菜单。代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>简单的下拉菜单</title> 6 <style> 7 .dropdown{ 8 position:relative; 9 display:inline-block;10 }11 12 .dropdown-content{13 min-width:200px;14 border:1px solid black;15 position:absolute;16 display:none;17 }18 19 .dropdown:hover .dropdown-content{20 display:block;21 }22 </style>23 </head>24 <body>25 <div class="dropdown">26 <span>鼠标你过来,我为你展示下拉菜单。</span>27 <div class="dropdown-content">28 <p>下拉菜单 1</p>29 <p>下拉菜单 2</p>30 </div>31 </div>32 </body>33 </html>
实例解析:
HTML 部分:
可以使用任何 HTML 元素来打开下拉菜单,比如 <span>,或 <a>、<button> 等元素。
然后,使用 <div> 元素来创建一个容器,用于包含下拉菜单的内容,并自定义他需要出现的位置。
最后,再使用 <div> 元素来包裹这些元素,并使用 CSS 来设置下拉内容的样式。
CSS 部分:
.dropdown 类使用 position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用 position:absolute)的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的,在鼠标移入指定元素后显示。
注意:在上面的例子中,下拉菜单容器的宽度设置为最小 200px,根据实际情况可以自行定义。
如果希望下拉菜单与下拉按钮的宽度一致,可将宽度设置为 100%,overflow:auto 属性可以指定在小尺寸屏幕上滚动。
:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单,将下拉菜单容器设置为 display:block;
2、创建下拉菜单
在上面例子的基础上,创建一个下拉菜单,并允许用户选取列表中的某一项目。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单实例</title> 6 <style> 7 /* 容器 <div> - 需要定位下拉内容 */ 8 .dropdown{ 9 position:relative;10 display:inline-block;11 }12 13 /* 下拉菜单内容,设置为隐藏 */14 .dropdown-content{15 min-width:150px;16 background-color:#F5F5F5;17 position:absolute;18 display:none;19 box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);20 }21 22 /* 下拉按钮样式 */23 .dropbtn{24 color:white;25 font-size:16px;26 padding:15px;27 border:none;28 background-color:#00CD66;29 cursor:pointer;30 }31 32 /* 下拉菜单链接的样式 */33 .dropdown-content a{34 color:black;35 text-decoration:none;36 padding:12px 15px;37 display:block;38 }39 40 /* 鼠标移入后显示下拉菜单 */41 .dropdown:hover .dropdown-content{42 display:block;43 }44 45 /* 鼠标移入后修改链接的背景色 */46 .dropdown-content a:hover{47 background-color:#E8E8E8;48 }49 50 /* 下拉菜单显示后修改下拉按钮的背景色 */51 .dropdown:hover .dropbtn{52 background-color:#008B00;53 }54 </style>55 </head>56 <body>57 <div class="dropdown">58 <button type="button" class="dropbtn">下拉菜单按钮</button>59 <div class="dropdown-content">60 <a href="#">下拉菜单项 1</a>61 <a href="#">下拉菜单项 2</a>62 <a href="#">下拉菜单项 3</a>63 </div>64 </div>65 </body>66 </html>
在 Chrome 中当鼠标移入下拉菜单按钮时显示如下:
在上面的例子中,下拉菜单的内容设置了 box-shadow 属性,这个属性主要用于添加阴影,这样下拉菜单看起来就像一个“卡片”一样。该属性指定下拉菜单在水平方向阴影为 0,垂直方向为 8 像素的阴影,模糊距离为 15 像素,阴影的尺寸为 0,并指定阴影的颜色为黑色,且透明度为 0.2。
下拉菜单按钮使用了 cursor 属性,该属性主要用于指定鼠标光标的类型,即鼠标指针放在一个元素边界范围内时所用的光标形状。
下表列出了该属性所有的值: 鼠标可移入对应的属性值,查看光标的形状。
值 | 说明 |
URL | 需要使用的自定义光标的 URL。注意:在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 |
default | 默认光标,通常是一个箭头。 |
auto | 默认,浏览器设置的光标。 |
pointer | 光标显示为指示链接的指针,即一只手。 |
text | 此光标指示文本。 |
wait | 此光标指示程序正忙,显示为一个转动的蓝色小圆圈。 |
help | 此光标指示可用的帮助,显示为一个箭头右下角带有问号。 |
crosshair | 光标显示为十字线。 |
move | 此光标指示某对象可被移动。 |
e-resize | 此光标指示矩形框的边缘可被向右(东)移动。 |
ne-resize | 此光标指示矩形框的边缘可被向上及向右移动(北/东)。 |
nw-resize | 此光标指示矩形框的边缘可被向上及向左移动(北/西)。 |
n-resize | 此光标指示矩形框的边缘可被向上(北)移动。 |
se-resize | 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 |
sw-resize | 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 |
s-resize | 此光标指示矩形框的边缘可被向下移动(南)。 |
w-resize | 此光标指示矩形框的边缘可被向左移动(西)。 |
3、下拉菜单的对齐方式
如果下拉菜单设置了 float:left 样式,那么还需要设置 left:0,即从 left:0 处开始从左向右显示菜单内容,否则会超出浏览器左边窗口。
如果下拉菜单设置了 float:right 样式,默认都是从左向右显示,菜单内容则会超出浏览器右边窗口,所以还需要设置 right:0,让下拉菜单内容从右向左。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单对齐</title> 6 <style> 7 /* 容器 <div> - 需要定位下拉内容 */ 8 .dropdown{ 9 position:relative;10 display:inline-block;11 }12 13 /* 下拉菜单内容,设置为隐藏 */14 .dropdown-content{15 min-width:150px;16 background-color:#F5F5F5;17 position:absolute;18 right:0;19 display:none;20 box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);21 }22 23 /* 下拉按钮样式 */24 .dropbtn{25 color:white;26 font-size:16px;27 padding:15px;28 border:none;29 background-color:#00CD66;30 cursor:pointer;31 }32 33 /* 下拉菜单链接的样式 */34 .dropdown-content a{35 color:black;36 text-decoration:none;37 padding:12px 15px;38 display:block;39 }40 41 /* 鼠标移入后显示下拉菜单 */42 .dropdown:hover .dropdown-content{43 display:block;44 }45 46 /* 鼠标移入后修改链接的背景色 */47 .dropdown-content a:hover{48 background-color:#E8E8E8;49 }50 51 /* 下拉菜单显示后修改下拉按钮的背景色 */52 .dropdown:hover .dropbtn{53 background-color:#008B00;54 }55 </style>56 </head>57 <body>58 <div class="dropdown" style="float:left;">59 <button type="button" class="dropbtn">左</button>60 <div class="dropdown-content" style="left:0;">61 <a href="#">下拉菜单项 1</a>62 <a href="#">下拉菜单项 2</a>63 <a href="#">下拉菜单项 3</a>64 </div>65 </div>66 67 <div class="dropdown" style="float:right;">68 <button type="button" class="dropbtn">右</button>69 <div class="dropdown-content">70 <a href="#">下拉菜单项 1</a>71 <a href="#">下拉菜单项 2</a>72 <a href="#">下拉菜单项 3</a>73 </div>74 </div>75 </body>76 </html>
在 Chrome 中当鼠标移入右下拉按钮时显示如下:
4、下拉图片
下的例子,在下拉菜单中添加图片:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉图片</title> 6 <style> 7 /* 容器 <div> - 需要定位下拉内容 */ 8 .dropdown{ 9 position:relative;10 display:inline-block;11 }12 13 /* 下拉菜单内容,设置为隐藏 */14 .dropdown-content{15 min-width:300px;16 background-color:#F5F5F5;17 position:absolute;18 display:none;19 box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);20 }21 22 /* 鼠标移入后显示下拉菜单 */23 .dropdown:hover .dropdown-content{24 display:block;25 }26 27 /* 图片文字描述的样式 */28 .heading{29 padding:15px;30 text-align:center;31 }32 </style>33 </head>34 <body>35 <div class="dropdown">36 <img src='/images/loading.gif' data-original="images/1.jpg" width="120" height="120" >37 <div class="dropdown-content">38 <img src='/images/loading.gif' data-original="images/xi.jpg" width="300" height="200" >39 <div class="heading">最美的时光,留给最美的风景!</div>40 </div>41 </div>42 </body>43 </html>
在 Chrome 中当鼠标移入图片下拉按钮时显示如下:
5、导航栏下拉菜单
下面的例子,在导航栏菜单中添加下拉菜单:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>导航栏下拉菜单</title> 6 <style> 7 *{margin:0;padding:0;} 8 ul{ 9 list-style-type:none;10 background-color:#333;11 overflow:hidden;12 }13 li{14 float:left;15 }16 li a, .dropbtn{17 display:inline-block;18 color:white;19 text-align:center;20 padding:14px 16px;21 text-decoration:none;22 }23 24 li a:hover, .dropdown:hover .dropbtn{25 background-color:#111;26 }27 28 .dropdown{29 display:inline-block;30 }31 32 .dropdown-content{33 min-width:200px;34 background-color:#F9F9F9;35 position:absolute;36 display:none;37 box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);38 }39 40 .dropdown-content a{41 color:black;42 padding:12px 16px;43 text-decoration:none;44 display:block;45 }46 47 .dropdown-content a:hover{48 background-color:#F1F1F1;49 }50 51 .dropdown:hover .dropdown-content{52 display: block;53 }54 </style>55 </head>56 <body>57 <ul>58 <li><a href="#shop" class="active">在线商城</a></li>59 <li><a href="#news">产品展示</a></li>60 <div class="dropdown">61 <a href="#" class="dropbtn">下拉菜单</a>62 <div class="dropdown-content">63 <a href="#">子菜单 1</a>64 <a href="#">子菜单 2</a>65 <a href="#">子菜单 3</a>66 </div>67 </div>68 </ul>69 </body>70 </html>
在 Chrome 中当鼠标移入下拉按钮时显示如下:
原标题:CSS 下拉菜单
关键词:CSS