纯 CSS 弹出子菜单

本文主要分为两块来写,首先说一下纯 CSS 实现弹出子菜单的原理,接着是一个例子。

一、实现原理

本文试图实现的弹出子菜单是,当鼠标经过菜单项时,子菜单就自动弹出来。实现这一功能的关键技术是使用“:hover”伪类。我们都知道,“:hover”可以实现改变元素的背景、字体、鼠标状态等元素自身的样式。其实,它也可以实现改变子元素的样式。

例如,请看下面的情况:

  1. <ul class="menu">  
  2.     <li><span>main menu 1<b class="caret"></b></span>  
  3.         <ul class="sub-menu">  
  4.             <li><span>sub menu 1</span></li>  
  5.             <li><span>sub menu 2</span></li>  
  6.             <li><span>sub menu 3</span></li>  
  7.             <li><span>sub menu 4</span></li>  
  8.             <li><span>sub menu 5</span></li>  
  9.         </ul>  
  10.     </li>  
  11. </ul>  

使用第一层 ul 的 li 元素的伪类“:hover”是可以实现修改其子元素的样式的。其语法格式如下:

  1. ul.menu > li:hover > ul{  
  2.     displayblock;  
  3. }  

当然,这只是举个例子,其它的有类似结构的元素也是可以实现的。本文实现弹出子菜单的技术关键就是这一个样式了。

二、一个例子

实现效果:

实现代码如下:

  1. <html >  
  2. <head>  
  3. <title>Dropdown menu without JavaScript</title>  
  4. </head>  
  5. <body>  
  6. <style type="text/css">  
  7. #chenishr{  
  8.     background: #489382;  
  9.     width: 100%;  
  10.     height: 35px;  
  11.     line-height: 35px;  
  12. }  
  13. #chenishr ul.menu{  
  14.     width: 600px;  
  15.     height: 35px;  
  16.     line-height: 35px;  
  17.     margin: 0 auto;  
  18.     padding: 0px;  
  19. }  
  20. #chenishr ul.menu > li{  
  21.     position: relative;  
  22.     list-style: outside none none;  
  23.     display: inline-block;  
  24.     padding: 0 10px;  
  25.     height: 35px;  
  26.     border-left: solid 1px #1A7E77;  
  27. }  
  28. #chenishr ul.menu > li:first-child{  
  29.     border-left: none;  
  30. }  
  31. #chenishr ul.sub-menu{  
  32.     display: none;  
  33.     position: absolute;  
  34.     top: 35px;  
  35.     left: 0px;  
  36.     min-width: 236px;  
  37.     border: solid 1px #DDDDDD;  
  38.     padding: 0px;  
  39.     box-shadow: 0 5px 10px rgba(0,0,0,0.2);  
  40.     background: #FFFFFF;  
  41. }  
  42. #chenishr ul.sub-menu > li{  
  43.     list-style: none;  
  44.     padding-left: 10px;  
  45.     border-top: 1px solid #EEE;  
  46. }  
  47. #chenishr ul.sub-menu > li:first-child{  
  48.     border-top: none;  
  49. }  
  50. #chenishr ul.sub-menu > li:hover{  
  51.     background: #EEEEEE;  
  52.     cursor: pointer;  
  53. }  
  54. #chenishr ul.menu > li:hover{  
  55.     background: #68B7A6;  
  56.     cursor: default;  
  57. }  
  58. #chenishr ul.menu > li:hover > ul{  
  59.     display: block;  
  60. }  
  61. #chenishr .caret{  
  62.     display: inline-block;  
  63.     width: 0;  
  64.     height: 0;  
  65.     vertical-align: top;  
  66.     border-top: 4px solid #000;  
  67.     border-right: 4px solid transparent;  
  68.     border-left: 4px solid transparent;  
  69.     content: "";  
  70.     margin: 16px 0px 0px 3px;  
  71. }  
  72. </style>  
  73. <div id="chenishr">  
  74.     <ul class="menu">  
  75.         <li><span>main menu 1<b class="caret"></b></span>  
  76.             <ul class="sub-menu">  
  77.                 <li><span>sub menu 1</span></li>  
  78.                 <li><span>sub menu 2</span></li>  
  79.                 <li><span>sub menu 3</span></li>  
  80.                 <li><span>sub menu 4</span></li>  
  81.                 <li><span>sub menu 5</span></li>  
  82.             </ul>  
  83.         </li>  
  84.         <li><span>main menu 2</span></li>  
  85.         <li><span>main menu 3<b class="caret"></b></span>  
  86.             <ul class="sub-menu">  
  87.                 <li><span>sub menu 1</span></li>  
  88.                 <li><span>sub menu 2</span></li>  
  89.                 <li><span>sub menu 3</span></li>  
  90.                 <li><span>sub menu 4</span></li>  
  91.                 <li><span>sub menu 5</span></li>  
  92.             </ul>  
  93.         </li>  
  94.     </ul>  
  95. </div>  
  96. </body>  
  97. </html>  

(完)

本文作者: chenishr

本文标题:《纯 CSS 弹出子菜单》

本文地址: https://blog.chenishr.com/?p=238

©版权所有,除非注明, 永在路上文章均为原创,转载请以链接形式注明出处和作者细信息。

发表评论

电子邮件地址不会被公开。 必填项已用*标注