首页 > 作文

利用纯css做一个下拉菜单功能的示例代码

更新时间:2023-04-03 19:44:41 阅读: 评论:0

导语:
这几天看面试题目的时候,经常能够看到用css去实现一个下拉菜单,但是我发现很多人却没能够做出来,最后只能勉强用js做出来。实话实说,我很震惊,这个功能实现起来很简单,甚至可以说是入门题目,怎么这么多人不会呢?所以今天来个面试干货,带大家直接手撸css做下拉菜单。

还是一样,话不多说,直接上效果图。

1,一个按钮,没点击前(手机端)或者鼠标没指向时(pc端)

2,点击后,或者鼠标指向后。

就能够显示下拉菜单,而且它的实现原理也很简单,只需要记住一点:h欧缇丽over,这个属性就行了。

我们直接上代码,稍后再来解释

<!doctype html><html>至圣先师是谁<head>  <meta chart="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="x-ua-compatible" content="ie=edge">    <style>        li{            list-style: none;            height: 28px;        }        #menu{            display: inline-block;        }        #menu #list {            max-height: 0;            transition: max-height 0.25s ea-out;            overflow: hidden;            background: #f5f4f4;            width: 80px;            margin: 0;            padding: 0;            text-align: center;        }        #menu:hover #list {            max-height: 200px;            transition: max-height 0.2石榴汁5s ea-in;            width: 80px;            margin: 0;            padding: 0;        }        .button{          height: 32px;          width: 80px;          margin-top: 6px;          border-radius: 4px;          color: #fff;          padding-left: 0;          padding-right: 0;          line-he三八妇女节祝词ight: 32px;          background: #e33e33;          text-align: center;        }    </style></head><body>  <div id="menu">    <div class="button">更多信息</div>    <ul id="list">        <li>个人中心</li>        <li>我的博客</li>        <li>设置</li>        <li>退出登陆</li>        <li>注销</li>    </ul>  </div></body></html>

只需要设置一个div,然后给他设置两种状态,一种是没有:hover,一种是有:hover。感恩手抄报简单又漂亮并且在没有:hover的时候设置菜单隐藏就可以了(overflow: hidden;),其余的代码都是简单的盒子模型。

现在再来说一说:hover,这个东西是什么,它是一个css选择器,选择器用于选择鼠标指针浮动在上面的元素。 所以说当鼠标悬浮或者手机端点击的时候,就会触发这个属性,就能够让这个下拉菜单显示出来了。同时我们加上了transition属性,让下拉菜单有渐变的效果,更加感觉时下拉下来的。

所以说css选择器是不是很神奇,用的好的话,就不用写一大坨js代码。我将会在后续把css选择器做成一个专栏,到时候在系统的介绍所有的css选择器。

总结

到此这篇关于利用纯css做一个下拉菜单功能的示例代码的文章就介绍到这了,更多相关css 下拉菜单内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持www.887551.com!

本文发布于:2023-04-03 19:44:40,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/fa73e679affac9e300d705610493d118.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:利用纯css做一个下拉菜单功能的示例代码.doc

本文 PDF 下载地址:利用纯css做一个下拉菜单功能的示例代码.pdf

标签:菜单   选择器   代码   鼠标
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图