运用纯css做一个往下拉莱单作用的实⊙﹏⊙例编

日期:2020-11-04 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

导语:
近几天看招聘面试题型的情况下,常常可以见到用css去完成一个往下拉莱单,可是发了现许多人却不曾够作出来,最终只有凑合用js作出来。说实话实说,我很吃惊,这一作用完成起來非常简单,乃至能够说成新手入门题型,如何那么多的人不容易呢?因此今日再来一个招聘面试干货知识,带大伙儿立即手撸css做往下拉莱单。

還是一样,话很少说,立即上实际效果图。

1,一个按键,没点一下前(手机上端)或是电脑鼠标没偏向时(pc端)

2,点一下后,或是电脑鼠标偏向后。


就可以够显示信息往下拉莱单,并且它的完成基本原理也非常简单,只必须记牢一点:hover,这一特性就可以了了。

大家立即上编码,稍后再说表述

<!DOCTYPE html>
<html>
<head>
  <meta charset="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 ease-out;
            overflow: hidden;
            background: #f5f4f4;
            width: 80px;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        #menu:hover #list {
            max-height: 200px;
            transition: max-height 0.25s ease-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-height: 32px;
	          background: #E33E33;
	          text-align: center;
        }
    </style>
</head>
<body>
  <div id="menu">
    <div class="button">大量信息内容</div>
    <ul id="list">
        <li>本人管理中心</li>
        <li>我的blog</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 往下拉莱单內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!