源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: css简易实现动态下拉框原理 [打印本页]
作者: 洪七公    时间: 2023-10-6 20:48
标题: css简易实现动态下拉框原理

直接步入正题，我们要实现的效果如下图所示：

(, 下载次数: 145)


分析：

1.鼠标上浮出现下拉框：使用hover伪类实现

2.下拉框不占下一行元素的空间：绝对定位实现

3.下拉框瀑布式弹出：css的transition属性实现

代码：
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <style>
  7.                         *{
  8.                                 margin: 0px;
  9.                                 padding: 0px;
  10.                                 box-sizing: border-box;
  11.                         }
  12.                         .show-box{
  13.                                 width: 100%;
  14.                                 height: 0px;
  15.                                 background-color: #8A2BE2;
  16.                                 position: absolute;
  17.                                 top: 50px;
  18.                                 left: 0px;
  19.                                 overflow: hidden;
  20.                                 transition: 0.3s;
  21.                                
  22.                         }
  23.                        
  24.                         .show-box li{
  25.                                 float: left;
  26.                                 width: 100%;
  27.                                 height: 50px;
  28.                         }
  29.                         .show-box li:hover{
  30.                                 background-color: gainsboro;
  31.                         }
  32.                        
  33.                         .hover-box:hover .show-box{
  34.                                 height: 200px;
  35.                         }
  36.                 </style>
  37.         </head>
  38.         <body>
  39.                 <div style="height: 50px;background-color:red ;">
  40.                         <div class="hover-box" style="height: 50px;width: 100px;background-color: aqua;cursor: pointer;position: relative;">
  41.                                 <div><h1>锦尚中国</h1></div>
  42.                                 <ul class="show-box">
  43.                                         <li>2222</li>
  44.                                         <li>11111</li>
  45.                                         <li>3333</li>
  46.                                         <li>4444</li>
  47.                                 </ul>
  48.                         </div>
  49.                        
  50.                 </div>
  51.                 <div style="height: 50px;background-color:blue ;"></div>
  52.         </body>
  53. </html>
复制代码






欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3