HTML+CSS+JS 动态展开式菜单

若冰说

于 2024-06-07 08:00:00 发布

阅读量1.4k

点赞数 33

分类专栏：若冰说CSS css 文章标签： css javascript html 前端若冰说CSS

本文链接：https://blog.youkuaiyun.com/weixin_72553980/article/details/139513240

版权

本文展示了如何使用HTML、CSS和JavaScript实现一个动态展开的菜单按钮。菜单按钮呈现圆形，带有三条可展开/收起的横线。点击后，按钮将显示为一个叉号，同时展开一个包含多个选项的菜单列表。菜单列表有渐变背景，选项以动画形式出现。代码实现中涉及到布局、伪元素、过渡效果和动画等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果演示

14-动态展开式菜单.gif

实现了一个可展开菜单按钮的效果，点击按钮会弹出一个菜单列表，菜单列表中包含多个选项。按钮的样式为一个圆形背景，中间有三条横线，表示可以展开。当按钮被点击后，三条横线会变成一个叉号，表示可以收起。菜单列表的样式为一个白色背景，四周有阴影，包含多个选项，每个选项都有一个图标和文字。当菜单展开时，选项会以渐变的方式出现。

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态展开式菜单</title>
    <link rel="stylesheet" href="./14-动态展开式菜单.css">
</head>

<body>
    <div class="menu-box">
        <div class="menu-button">
            <div class="line-box">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
        </div>
        <ul class="menu-list">
            <li><i class="fa fa-sliders"></i><span>设置</span></li>
            <li><i class="fa fa-clone"></i><span>复制</span></li>
            <li><i class="fa fa-share-square-o"></i><span>分享</span></li>
            <li><i class="fa fa-trash-o"></i><span>删除

最低0.47元/天解锁文章