源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 2290|回复: 0

[CSS/Html] css简易实现动态下拉框原理

[复制链接]

3096

主题

3497

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
269266
发表于 2023-10-6 20:48:48 | 显示全部楼层 |阅读模式

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

648604db149e4a1cb2b7fc3b26d365b9.gif


分析:

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>
复制代码


您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-16 06:53 , Processed in 0.144222 second(s), 19 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明