面试官：请用CSS实现下拉菜单，我：这题我会！(紧张地搓手.....)

椰汁33
679 阅读4分钟

前言

代码下面自取： 之前对于下拉菜单大家应该用js实现过，通过点击来实现对下拉菜单的display进行修改，就可以实现下拉菜单的效果啦，那么用CSS怎么实现呢？下面让我们开启学习之旅吧~

正文

html的实现比较简单，就是定义三个input和article，在article里面放label和p标签。

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯css菜单</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="accordtion">
        <input type="checkbox" id="collapse1" hidden>
        <input type="checkbox" id="collapse2" hidden>
        <input type="checkbox" id="collapse3" hidden>
        <!-- (article>label+p*4)*3 -->
        <!-- div的替代品，html5语义化标签 SEO 比较重要 -->
        <article>
            <label for="collapse1">列表1</label>
            <p>内容1</p>
            <p>内容2</p>
            <p>内容3</p>
            <p>内容4</p>
        </article>
        <article>
            <label for="collapse2">列表2</label>
            <p>内容1</p>
            <p>内容2</p>
            <p>内容3</p>
            <p>内容4</p>
        </article>
        <article>
            <label for="collapse3">列表3</label>
            <p>内容1</p>
            <p>内容2</p>
            <p>内容3</p>
            <p>内容4</p>
        </article>
    </div>
</body>
</html>
  • 这里我没有用div标签，而是选择用article标签，该标签为html5语义化标签，对于SEO(搜索引擎优化)比较重要。

这里我通过stylus来实现生成css文件，stylus更方便简洁，可以直接通过缩进来实现父子和兄弟的关系，下面介绍一下stylus和使用步骤：

stylus

Stylus 是一款CSS预处理工具，它的核心目标是增强CSS的功能性、可维护性和可读性，使得编写样式表变得更加高效和灵活。

特点包括：

  1. 简洁灵活的语法：Stylus支持缩进敏感的语法，这意味着你可以省略花括号 {} 和分号 ;，使得代码看起来更像Python等动态语言。同时，它也完全兼容传统的CSS语法，给予开发者选择的自由。
  2. 动态语言特性：Stylus基于Node.js，因此它支持变量、操作符、控制结构（如if/else、for循环）等编程语言特性；
  3. 变量与运算：可以定义和使用变量，以及进行数学运算；
  4. 嵌套规则：允许CSS选择器嵌套；
  5. 混入(Mixins) ：可以创建可复用的代码块；
  6. 继承与扩展：Stylus支持类的继承和属性的扩展；
  7. 函数和插件：允许用户自定义函数，以及使用或开发第三方插件来扩展Stylus的功能；
  8. 自动输出CSS：Stylus可以通过命令行工具或集成在构建流程中，将编写好的Stylus源文件编译成标准的CSS文件。

安装与使用：

  • 在终端输入安装stylus：
1npm install -g stylus

  • 在终端输入stylus --version，如果出现版本号，则表明安装成功；

  • 安装完成后，通过下面的命令实时监视并编译Stylus文件为CSS：

stylus -w input.styl -o output.css
  • -w 参数表示监听文件变化，自动重新编译；input.styl 是Stylus源文件，output.css 是生成的CSS文件。

在开始介绍stylus源文件代码的时候先分享几个知识点：

  • + --> 兄弟选择器
  • ~ --> 相邻同层选择器
  • & --> 引用父选择器
  • :checked --> 被选中后的状态
  • :nth-child --> 第几个孩子
  • :nth-of-type --> 第几个同类型的元素

stylus源文件代码

*
   padding 0
   margin 0
.accordtion
   width 300px
   article
       cursor pointer
       & + article
          margin-top 5px
    input
       &:nth-child(1):checked ~ article:nth-of-type(1) p
       &:nth-child(2):checked ~ article:nth-of-type(2) p
       &:nth-child(3):checked ~ article:nth-of-type(3) p
          max-height 600px   
    label
       display block
       height 40px
       padding 0 20px
       background-color #f66
       cursor pointer
       line-height 40px
       font-size 16px
       color #fff
    p
       overflow hidden
       padding 0 20px
       border 1px solid #f66
       border-top none
       border-bottom-width 0
       max-height 0
       line-height 30px

代码整体思路：

  • 先将p标签的max-height设为0；
  • 通过:checked来实现当input被选中的时候将p标签的max-height设为600px。

部分代码解析：

  • & + article：&为引用父选择器，也就是accordtion选择器，那么根据accordtion选择器找到其后面紧邻的 <article> 元素，即把除了第一个article，后面的所有的article全部设置该样式；
  • &:nth-child(1):checked ~ article:nth-of-type(1) p：input的第一个孩子选择器，也就是第一个label被选中的时候，其相邻同层的选择器max-height 600px ，也就是所有的p选择器；
  • transition all 500ms： 表示p元素从max-height 0状态过渡到max-height 600px状态时的动画效果，过渡需要的时间为500ms。

结语

image.png

avatar
文章
阅读
粉丝