星空网 > 软件开发 > 网页设计

CSS 下拉菜单

  使用 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 中当鼠标移入下拉菜单按钮时显示如下:

CSS 下拉菜单

  在上面的例子中,下拉菜单的内容设置了 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 中当鼠标移入右下拉按钮时显示如下:

CSS 下拉菜单

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 中当鼠标移入图片下拉按钮时显示如下:

CSS 下拉菜单

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 下拉菜单

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

吕哥聊跨境:https://www.goluckyvip.com/tag/37693.html
吕蔚嬿:https://www.goluckyvip.com/tag/37694.html
旅行箱包:https://www.goluckyvip.com/tag/37695.html
旅行用品:https://www.goluckyvip.com/tag/37696.html
旅游跨境电商:https://www.goluckyvip.com/tag/37697.html
履约率:https://www.goluckyvip.com/tag/37698.html
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流