菲洛嘉青春动能素135HA FILLMED® NCTF 135HA LED指示灯的常见故障分析 智微智能 Elkhartlake K075终端,零售产业新选择 天空蓝拓客管理系统详细介绍版 muso公链项目 天使计划 是什么?[秘] 独家揭秘最前沿的家装“黑科技”——掌赋 天博体育欧洲杯特辑,东道主法兰西的失意2016 亚马逊的送货侦察员 学习听起来像挡泥板 Google Comics Factory使ML变得容易 笑着说-男性或女性 Amazon Rekognition中更好的人脸检测 关于Spaun的真相-大脑模拟 两个聊天机器人彼此聊天-有趣又怪异 GANPaint:将AI用于艺术 WCF和WF给予社区 从耳朵到脸 所有神经网络的深层缺陷 蠕虫在尾巴上平衡杆子 Kickstarter上的OpenCV AI套件 TensorFlow-Google的开源AI和计算引擎 众包取代新闻工作者 Google的DeepMind学会玩街机游戏 哑机器人V智能机器人 .NET与.NET 5融为一体 Google的深度学习-语音识别 LInQer将.NET LINQ移植到Javascript 机器人TED演讲-新的图灵测试? GAN的发明者加入苹果 您的智能手机会监视您键入的内容 人工智能帮助改善国际象棋 Zalando Flair NLP库已更新 TensorFlow 1.5包含移动版本 AlphaGo输了一场比赛-比分3-1 虚拟机器学习峰会 Microsoft开源AI调试工具 SharePoint走向移动 F#4.0发出文化变革的信号 克里斯蒂拍卖AI艺术品 人工智能如何区分 Facebook在蒙特利尔的新AI实验室 Mozilla想要您的声音 微软使用极深的神经网络赢得ImageNet 建立AI合作伙伴关系 .NET Core 3-Microsoft几乎回到了起点 神经网络-更好的销售商? Google使用AI查找您的住所 虹膜-适用于Android的Siri证明苹果没有优势 TensorFlow 2提供更快的模型训练 深度学习研究人员将为Google工作
您的位置:首页 >前端 >

面试官让我用纯css做一个下拉菜单,一分钟搞定!!

导语:
这几天看面试题目的时候,经常能够看到用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>我的博客</li><li>设置</li><li>退出登陆</li><li>注销</li></ul></div></body></html>

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

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

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

在这里插入图片描述

你们的赞就是对我最大的鼓励。谢谢~

微信搜索【web小馆】,回复全栈博客项目,即可获取项目源码和后续的实战文章教程。每天用最简单朴实的语言,潜移默化的提升你的计算机基础知识和前端技术。小米粥,一个专注的web全栈工程师,我们下期再见!

在这里插入图片描述
node后台

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。