QQ登录

只需一步,快速开始

西安信息网

0 回复贴,1934 次查看
<返回列表

用纯css实现下拉菜单的几种方式

  • TA的每日心情
    难过
    2019-4-25 14:58
  • 签到天数: 1 天

    [LV.1]初来乍到

    2

    主题

    3

    帖子

    23

    积分

    超级版主

    Rank: 8Rank: 8

    积分
    23
    发表于 2018-8-24 09:18:55
    第一种:display:none和display:block切换 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Document</title> 6     <style> 7         ul{ 8             list-style: none; 9         }10         .nav>li{11             float: left;12         }13         ul a{14             display: block;15             text-decoration: none;16             width: 100px;17             height: 50px;18             text-align: center;19             line-height: 50px;20             color: white;21             background-color: #2f3e45;22         }23         .nav>li:first-child a{24             border-radius: 10px 0 0 10px;25         }26         .nav>li:last-child a{27             border-radius: 0 10px 10px 0;28         }29         .drop-down{30             /*position: relative;*/31         }32         .drop-down-content{33             padding: 0;34             display: none;35             /*position: absolute;*/36         }37         38         h3{39             font-size: 30px;40             clear: both;41         }42         .drop-down-content li:hover a{43             background-color:red;44         }45         .nav .drop-down:hover .drop-down-content{46             display: block;47         }48 </style>49 </head>50 <body>51     <ul class="nav">52         <li><a href="#">下拉菜单</a></li>53         <li class="drop-down"><a href="#">下拉菜单</a>54             <ul class="drop-down-content">55                 <li><a href="#">我是1</a></li>56                 <li><a href="#">我是2</a></li>57                 <li><a href="#">我是3</a></li>58             </ul>59             </li>60         <li><a href="#">下拉菜单</a></li>61         <li><a href="#">下拉菜单</a></li>62         <li><a href="#">下拉菜单</a></li>63     </ul>64     <h3>我是测试文字</h3>65 </body>66 </html>

    这是首先考虑到的实现方法,给 .drop-down-content 添加display:none,当悬浮在.drop-down上时 .drop-down-content的display变成block,缺点是不能添加过渡属性,慢慢弹出下来菜单。当.drop-down-content显示时会把后面的盒子往下挤,因为.drop-down-content 显示时是存在于文档流中的,给.drop-down设置position:relative,.drop-down-content设置position:absolute,使下拉菜单脱离了文档流来解决,上面注释的地方改过来即可



    第二种方法:给悬浮的这个li设置一个固定高度,然后设置超出部分隐藏,悬浮时显示。
    1 <style> 2         ul{ 3             list-style: none; 4         } 5         .nav>li{ 6             float: left; 7         } 8         ul a{ 9             display: block;10             text-decoration: none;11             width: 100px;12             height: 50px;13             text-align: center;14             line-height: 50px;15             color: white;16             background-color: #2f3e45;17         }18         .nav>li:first-child a{19             border-radius: 10px 0 0 10px;20         }21         .nav>li:last-child a{22             border-radius: 0 10px 10px 0;23         }24         .drop-down{25             /*position: relative;*/26             height: 50px;27             overflow: hidden;28         }29         .drop-down-content{30             padding: 0;31             /*position: absolute;*/32         }33         34         h3{35             font-size: 30px;36             clear: both;37 /*            position: relative;38             z-index: -1;*/39         }40         .drop-down-content li:hover a{41             background-color:red;42         }43         .nav .drop-down:hover{44             overflow: visible;45         }46 </style>

    有个问题:h3段落里面的文字会从下拉菜单中透过来,并且鼠标放在字上面的时候下拉菜单会缩回。
    解决方式有两种:1.给.drop-down设置position:relative,.drop-down-content设置position:absolute。
            2.给h3设置position:relative;z-index:-1。


    第三种方法:给下拉菜单设置固定的高度,下拉菜单的内容设置透明opacity: 0;,悬浮在下拉菜单时opacity: 1;来实现
    1     <style> 2         ul{ 3             list-style: none; 4         } 5         .nav>li{ 6             float: left; 7         } 8         ul a{ 9             display: block;10             text-decoration: none;11             width: 100px;12             height: 50px;13             text-align: center;14             line-height: 50px;15             color: white;16             background-color: #2f3e45;17         }18         .nav>li:first-child a{19             border-radius: 10px 0 0 10px;20         }21         .nav>li:last-child a{22             border-radius: 0 10px 10px 0;23         }24         .drop-down{25             /*position: relative;*/26             height: 50px;27         }28         .drop-down-content{29             padding: 0;30             opacity: 0;31             /*position: absolute;*/32         }33         34         h3{35             font-size: 30px;36             clear: both;37 /*            position: relative;38             z-index: -1;*/39         }40         .drop-down-content li:hover a{41             background-color:red;42         }43         .nav .drop-down:hover .drop-down-content{44             opacity: 1;45         }46 </style>

    效果同上。

    上面的几种方法都是不能添加过渡效果的,鼠标滑过时下拉菜单就马上弹出来了,用户体验不是很好,下面这种方法可以添加过渡的效果来实现一定时间内来弹出方法四:将下拉菜单的ul高度设置为0,并且超出部分隐藏掉。
    1     <style> 2         ul{ 3             list-style: none; 4         } 5         .nav>li{ 6             float: left; 7         } 8         ul a{ 9             display: block;10             text-decoration: none;11             width: 100px;12             height: 50px;13             text-align: center;14             line-height: 50px;15             color: white;16             background-color: #2f3e45;17         }18         .nav>li:first-child a{19             border-radius: 10px 0 0 10px;20         }21         .nav>li:last-child a{22             border-radius: 0 10px 10px 0;23         }24         .drop-down{25             /*position: relative;*/26             height: 50px;27         }28         .drop-down-content{29             padding: 0;30             opacity: 0.3;31             height: 0;32             overflow: hidden;33             transition: all 1s ease;34             /*position: absolute;*/35         }36         37         h3{38             font-size: 30px;39             clear: both;40 /*            position: relative;41             z-index: -1;*/42         }43         .drop-down-content li:hover a{44             background-color:red;45         }46         .nav .drop-down:hover .drop-down-content{47             opacity: 1;48             height: 150px;49         }

    也会出现上面同样的问题,两种解决方式,把上面代码中注释的地方改过来即可。
    做这个demo时我碰到误区,以为把下拉菜单ul值设置为0,下拉菜单整体会隐藏掉,实际上是ul的高度变为了0,但是里面的内容并没有变化,觉得跟做导航时浮动li,ul的高度变成了0,li还能显示一样。一定要给ul设置overflow:hidden,整个下拉菜单才会隐藏。顺带提一句:我们做导航条的时候一般都是左浮动li标签,ul的高度就变成了0,然后给ul设置overflow:hidden,ul就会有高度了,包裹了li标签,后面的盒子会正常布局。


    方法五:设置包裹下拉菜单的li元素position:relation;下拉菜单绝对定位,left:-999px;使下拉菜单跑到左边浏览器外面看不到的地方,悬浮时,left:0;使其出现在浏览器中显示。
    1     <style> 2         ul{ 3             list-style: none; 4         } 5         .nav>li{ 6             float: left; 7         } 8         ul a{ 9             display: block;10             text-decoration: none;11             width: 100px;12             height: 50px;13             text-align: center;14             line-height: 50px;15             color: white;16             background-color: #2f3e45;17         }18         .nav>li:first-child a{19             border-radius: 10px 0 0 10px;20         }21         .nav>li:last-child a{22             border-radius: 0 10px 10px 0;23         }24         .drop-down{25             position: relative;26         }27         .drop-down-content{28             padding: 0;29             position: absolute;30             left: -999px;31         }32         h3{33             font-size: 30px;34             clear: both;35         }36         .drop-down-content li:hover a{37             background-color:red;38         }39         .nav .drop-down:hover .drop-down-content{40             left: 0;41         }42 </style>




    后来又意淫了一种方法,把下拉菜单的背景色和字体色改为透明色,然后后悬浮在li上时,颜色变回来。然而发现并没有什么卵用,虽然眼睛看不到,但是鼠标已过去时变成了小手,就暴露啦,哈哈。

    温馨提示:
    论坛里发表的文章部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。本站部分作品是由网友自主投稿和发布、编辑整理上传,对此类作品本站仅提供交流平台,不为其版权负责。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。

    相关帖子

    回复

    使用道具 举报

    快速回帖 使用高级回帖 (可批量传图、还有插入视频等功能哦!)

    您需要登录后才可以回帖 登录 | 立即注册

    • 发布信息免费
    • 发贴彩色标题
    • 签到额外经验值

    如何快速提升等级,查看[积分规则]

    最新热版
    男子非法售卖手铐脚镣等警用装备 被警方查获
    男子非法售卖手铐脚镣等警用装备 被警方查
    12月5日,榆阳公安分局治安大队会同上郡路派出所民警在榆林市肤施路一安保
    银行卡怎么收藏有价值 男子17年收藏3万张卡
    银行卡怎么收藏有价值 男子17年收藏3万张卡
    如果以卡类为专题,可按照银行卡的种类性质、功能为收藏目标。如将借记卡、
    亲哥哥因沉溺色情电影 多次强奸未成年妹妹
    亲哥哥因沉溺色情电影 多次强奸未成年妹妹
    资料图15岁的女儿与“男友”发生关系被撞破,气急败坏的母亲怒告对方强奸。
    礼泉民警收缴气枪一把及少量钢珠弹
    礼泉民警收缴气枪一把及少量钢珠弹
    为严防辖区涉枪涉爆案件发生,咸阳礼泉西张堡派出所认真按照县局缉枪治爆工
    智能手机新玩法在线解密 指纹识别成百家乐见标配
    智能手机新玩法在线解密 指纹识别成百家乐
    众所周知,每个人包括指纹在内的皮肤纹路,在断点、交叉点和图案呈现上各有
    IT男辞职卖肉夹馍 研发半年曾用掉5000斤面粉
    IT男辞职卖肉夹馍 研发半年曾用掉5000斤面
    西少爷的团队3个人全是西安交大本科毕业,经过半年的研发,用掉5000斤面粉
    啪啪啪多久才正常?一夜七次这可能吗?
    啪啪啪多久才正常?一夜七次这可能吗?
    有人说:“和男票啪啪啪好久,滋味棒呆!”又有人说:“你看那《霸道总裁xx
    追踪报道丨大学生吸食“笑气”险致残 奶油气弹网上可随意购买
    追踪报道丨大学生吸食“笑气”险致残 奶油
    5月16日,华商报A4版报道了西安两名大学生因频繁出入酒吧购买吸食笑气,导
    春运首日西安北站里写对联送福字 美国夫妇感受中国年味儿
    春运首日西安北站里写对联送福字 美国夫妇
    1月10日是春运首日,当天西安北车站到发旅客预计32.5万人,主要以学生和返
    重磅!西安地铁5号线一期6号线一期和9号线力争年底前建成通车
    重磅!西安地铁5号线一期6号线一期和9号线
    近日,西安市轨道集团召开2020年度工作会议,记者了解到,西安市将力争5号
    相关推荐
    相关推荐
    ©2001-2018 西安信息网 http://www.xalist.com中国互联网举报中心陕ICP备14005887号-6 非经营性网站Powered byDiscuz!X3.4公安网备|网站地图
    Archiver手机版小黑屋广告合作客服QQ:2877366609Comsenz Inc.