面试官让我用纯css做一个下拉菜单,一分钟搞定!! CSS常用样式(二):绘制双箭头 住建部重申“房子是用来住的”;商务部公布禁塑时间表;在线旅游网站不得大数据杀熟 给大数据杀熟戴上“紧箍咒” RT-Thread推物联网操作系统!300秒启动安防摄像机 如何用一句话激怒程序员! 吉利在青岛成立物联网、卫星技术新公司 统计学和大数据之间有哪些联系 图说:九月开门红 大数据揭示A股九月行情走向 物联网时代下的“芯机遇”,「芯来科技」打造国产RISC-V生态 汇顶科技:指纹芯片巨头半年研发投入增八成,拓展物联网、汽车电子等领域应对风险 新华网|福州:树立物联网产业“马尾坐标” 「行走自贸区」福州:树立物联网产业“马尾坐标” k8s跨namespace访问服务 Mysql关键字和保留字(注意) ALTER command denied to user 'dev'@'192.168.10.xxx' for table 'xx_fanv_fail' oracle授权查询 ffmpeg vsync参数分析 小程序云函数中用group分组查询,只能查询20条,怎么解决? 【MyBatis&MyBatis-plus】分页查询避免两次查询同时返回总数和数据 数据库执行update语句没有反应,一直转圈,数据库锁表处理解决方法 按键精灵-自定义函数time(),datetime(),diff() 在Vue+Element中,Select选项值动态从后台接口获取的实现方法 mongoTemplate的方法和update() 欧科云链OKLink推出“链上天眼”功能 区块链+大数据全面助力链上安全 第二届微热点大数据论坛将于9月5日开幕 网龙参与全国教育大数据统计 构建五级服务支撑体系 无代码app制作崛起,app开发已不再是程序员的专利了 torch深入学习之凤飞九天torch.nn.MarginRankingLoss 【机器学习】—各类梯度下降算法 简要介绍 隐马尔可夫模型(HMM)来龙去脉(二) 单智能体、多智能体强化学习基本概念及算法分类?为啥提出多智能体强化学习,现状? 张量网络算法基础(八、张量网络机器学习【上】) MapReduce 简介 Python爬虫入门教程 81-100 小众爬虫框架looter,框架作者竟然在官方手册开车 机器人二维导航教程汇总 mapper 使用示例 Redis的概念及关系型与非关系型数据库对比 MySQL必知必会:使用WHERE、正则表达式、通配符过滤数据 Solr的增量更新和全量更新对比 MYSQL数据库维护 MATLAB与Mysql数据库连接并数据交换(基于ODBC) 数据库:PostgreSQL:基础功能使用介绍 MYSQL 5.7 高级SQL语句(3)——数据库函数和存储过程 mysql导出数据到表格讲解大全(导出数据带表头,导出数据中文乱码问题解决) SpringBoot升级/指定jackson版本 JAVA - EnumMap与EnumSet简单总结 js获取主机mac等信息【亲测有效】-- 附执行结果&代码 [记录六] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之node后台连接mysql和redis,登陆接口的编写 C# 读取XML配置文件
您的位置:首页 >前端 >

面试官让我用纯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后台

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