CSS、JS之动态展开式菜单

于 2024-08-30 14:44:12 发布
阅读量211 收藏 4
点赞数 5
分类专栏： CSS JavaScript 文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangliwen1101/article/details/141718040
版权

效果演示

图片

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

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>删除</span></li>
        </ul>
    </div>
</body>

</html>

<script src="./14-动态展开式菜单.js"></script>

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top left, #84a0f4, #c2e9fb);
}

body::before {
    content: "点击右下角";
    color: #fff;
    font-size: 32px;
    text-shadow: 0 3px 3px #4c6ed3;
}

.menu-box {
    position: fixed;
    bottom: 40px;
    right: 40px;
}

.menu-button {
    width: 50px;
    height: 50px;
    background-color: #5c67ff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(92, 103, 255, 0.3);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: 0.2s ease-in;
}

.menu-button:hover {
    background-color: #4854ff;
    box-shadow: 0 0 0 8px rgba(92, 103, 255, 0.3);
}

.menu-button .line-box {
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.3s ease-out;
}

.menu-button .line {
    background-color: #fff;
    width: 100%;
    height: 2px;
    border-radius: 2px;
}

.menu-button .line:first-child {
    width: 50%;
    transform-origin: right;
    transition: transform 0.3s ease-in-out;
}

.menu-button .line:last-child {
    width: 50%;
    align-self: flex-end;
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
}

.menu-list {
    width: 140px;
    height: 160px;
    background-color: #fff;
    border-radius: 8px;
    list-style: none;
    padding: 6px;
    box-shadow: 0 0 4px 4px rgba(92, 103, 255, 0.15);
    position: absolute;
    right: 15px;
    bottom: 15px;
    opacity: 0;
    transform: scale(0);
    transform-origin: bottom right;
    transition: 0.3s ease;
    transition-delay: 0.1s;
}

.menu-list li {
    display: flex;
    align-items: center;
    padding: 10px;
    color: #1c3991;
    cursor: pointer;
    position: relative;
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.2s ease-in;
}

.menu-list li:hover {
    color: #5c67ff;
}

.menu-list li::before {
    content: "";
    width: calc(100% - 24px);
    height: 1px;
    background-color: rgba(92, 103, 255, 0.1);
    position: absolute;
    bottom: 0;
    left: 12px;
}

.menu-list li:last-child::before {
    display: none;
}

.menu-list .fa {
    font-size: 18px;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-list span {
    font-size: 14px;
    margin-left: 8px;
}

.active .line-box {
    transform: rotate(-45deg);
}

.active .line-box .line:first-child {
    transform: rotate(-90deg) translateX(1px);
}

.active .line-box .line:last-child {
    transform: rotate(-90deg) translateX(-1px);
}

.active .menu-list {
    opacity: 1;
    transform: scale(1);
}

.active .menu-list li {
    animation: fade-in-item 0.4s linear forwards;
}

.active .menu-list li:nth-child(1) {
    animation-delay: 0.1s;
}

.active .menu-list li:nth-child(2) {
    animation-delay: 0.2s;
}

.active .menu-list li:nth-child(3) {
    animation-delay: 0.3s;
}

.active .menu-list li:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes fade-in-item {
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

const menu_box=document.querySelector('.menu-box');
const menu_button=document.querySelector('.menu-button');

menu_button.addEventListener('click',function(){
    menu_box.classList.toggle('active');
})

实现思路拆分

* {
  margin: 0;
  padding: 0;
}

这段代码是设置所有元素的外边距和内边距为0，这是为了避免不同浏览器之间的默认样式差异。

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to top left, #84a0f4, #c2e9fb);
}

这段代码设置了body元素的高度为100vh，使其占据整个视口的高度。使用flex布局，使其内容垂直和水平居中。同时设置了一个渐变背景色。

body::before {
  content: "点击右下角";
  color: #fff;
  font-size: 32px;
  text-shadow: 0 3px 3px #4c6ed3;
}

这段代码使用伪元素before在body元素前插入一个文本节点，提示用户点击右下角的按钮。

.menu-box {
  position: fixed;
  bottom: 40px;
  right: 40px;
}

这段代码设置了一个菜单盒子的位置，固定在页面的右下角。

.menu-button {
  width: 50px;
  height: 50px;
  background-color: #5c67ff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(92, 103, 255, 0.3);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: 0.2s ease-in;
}

这段代码设置了菜单按钮的样式，包括宽度、高度、背景色、圆角、阴影、颜色、居中等。同时设置了过渡效果，使按钮的样式在鼠标悬停时有变化。

.menu-button:hover {
  background-color: #4854ff;
  box-shadow: 0 0 0 8px rgba(92, 103, 255, 0.3);
}

这段代码设置了菜单按钮在鼠标悬停时的样式，包括背景色和阴影。

.menu-button .line-box {
  width: 20px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.3s ease-out;
}

这段代码设置了菜单按钮中三条横线的样式，包括宽度、高度、方向、间距、光标和过渡效果。

.menu-button .line {
  background-color: #fff;
  width: 100%;
  height: 2px;
  border-radius: 2px;
}

这段代码设置了菜单按钮中三条横线的样式，包括背景色、宽度、高度和圆角。

.menu-button .line:first-child {
  width: 50%;
  transform-origin: right;
  transition: transform 0.3s ease-in-out;
}

.menu-button .line:last-child {
  width: 50%;
  align-self: flex-end;
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}

这段代码设置了菜单按钮中第一条和第三条横线的样式，包括宽度、变换原点和过渡效果。

.menu-list {
  width: 140px;
  height: 160px;
  background-color: #fff;
  border-radius: 8px;
  list-style: none;
  padding: 6px;
  box-shadow: 0 0 4px 4px rgba(92, 103, 255, 0.15);
  position: absolute;
  right: 15px;
  bottom: 15px;
  opacity: 0;
  transform: scale(0);
  transform-origin: bottom right;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}

这段代码设置了菜单列表的样式，包括宽度、高度、背景色、圆角、列表样式、内边距、阴影、位置、透明度、缩放、变换原点和过渡效果。

.menu-list li {
  display: flex;
  align-items: center;
  padding: 10px;
  color: #1c3991;
  cursor: pointer;
  position: relative;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.2s ease-in;
}

这段代码设置了菜单列表中每个选项的样式，包括布局、对齐、内边距、颜色、光标、位置、透明度、平移和过渡效果。

.menu-list li:hover {
  color: #5c67ff;
}

这段代码设置了菜单列表中每个选项在鼠标悬停时的样式，包括颜色。

.menu-list li::before {
  content: "";
  width: calc(100% - 24px);
  height: 1px;
  background-color: rgba(92, 103, 255, 0.1);
  position: absolute;
  bottom: 0;
  left: 12px;
}

.menu-list li:last-child::before {
  display: none;
}

这段代码设置了菜单列表中每个选项之间的分隔线的样式，包括内容、宽度、高度、背景色、位置和显示。

.menu-list .fa {
  font-size: 18px;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-list span {
  font-size: 14px;
  margin-left: 8px;
}

这段代码设置了菜单列表中每个选项中图标和文字的样式，包括字体大小、宽度、高度、布局、对齐和间距。

.active .line-box {
  transform: rotate(-45deg);
}

.active .line-box .line:first-child {
  transform: rotate(-90deg) translateX(1px);
}

.active .line-box .line:last-child {
  transform: rotate(-90deg) translateX(-1px);
}

.active .menu-list {
  opacity: 1;
  transform: scale(1);
}

.active .menu-list li {
  animation: fade-in-item 0.4s linear forwards;
}

.active .menu-list li:nth-child(1) {
  animation-delay: 0.1s;
}

.active .menu-list li:nth-child(2) {
  animation-delay: 0.2s;
}

.active .menu-list li:nth-child(3) {
  animation-delay: 0.3s;
}

.active .menu-list li:nth-child(4) {
  animation-delay: 0.4s;
}

这段代码设置了菜单按钮和菜单列表在展开状态下的样式，包括菜单按钮中三条横线的变换、菜单列表的透明度和缩放、菜单列表中每个选项的动画效果和延迟时间。

@keyframes fade-in-item {
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

这段代码定义了一个动画效果，用于菜单列表中每个选项的出现，包括平移和透明度的变化。

码农园区
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS+JS 动态展开式菜单
正在创作系列：【若冰说CSS】
06-07 1231
实现了一个可展开菜单按钮的效果，点击按钮会弹出一个菜单列表，菜单列表中包含多个选项。按钮的样式为一个圆形背景，中间有三条横线，表示可以展开。当按钮被点击后，三条横线会变成一个叉号，表示可以收起。菜单列表的样式为一个白色背景，四周有阴影，包含多个选项，每个选项都有一个图标和文字。当菜单展开时，选项会以渐变的方式出现。
基于CSS两种菜单创建方式
sunbeacher的博客
07-13 991
HTML多种场景下需要菜单的实现，这里提供两种方式： （1）基于CSS的POPUP式菜单 特征：按需显示POPUP菜单，但布局是浮动的。 （2）覆盖式弹出菜单。 特征：按需显示菜单，菜单以弹出窗口模式显示，会覆盖下面的内容
HTML+CSS+JavaScript 实现三级菜单逐级展开效果
hcc13974721431的博客
01-09 1301
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三级菜单</titl.
h5+css3 响应式滑动菜单
qq_50951790的博客
11-04 916
html5+css3滑动式布局效果
CSS或JS两种方式实现手风琴式折叠菜单
weixin_53213705的博客
05-09 922
这篇文章主要介绍了CSS&JS两种方式实现手风琴式折叠菜单(示例代码)以及相关的经验技巧 <div class="accordion"> <div id="one" class="section"> <h3><a href="#one">折叠栏1</a></h3> <div id="image1" class="image"><img src=""></d
HTML+CSS 响应式侧边栏菜单
正在创作系列：【若冰说CSS】
05-31 931
实现了一个响应式的侧边栏菜单，当用户点击菜单按钮时，菜单会从左侧滑出，同时页面内容会向右移动，展示菜单选项。菜单选项包括一个头像和用户名，以及其他的菜单项，当用户将鼠标悬停在菜单项上时，菜单项会高亮显示。这段代码使用了CSS的flex布局和过渡效果，以及JavaScript的事件监听来实现菜单的响应式效果。
HTML和CSS+JS创建手风琴式菜单
Aruko的博客
08-08 1209
HTML部分(含JS) CSS部分（选择器部分和阿里图标库部分） 如下所示的简易手风琴菜单 HTML部分 我是在JSP页面上写的 注：JavaScript的代码是我直接找的别人的，我并没有学过JS所以也不懂 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!doctype html> <html> <head> <me
html左侧菜单展开与收起,JS+CSS可隐藏的左侧展开、折叠菜单
weixin_36240214的博客
05-30 2437
左侧隐躲菜单var maxmnus = 5function opTab(){var mnu = document.getElementById("menubar")var arrdiv = document.getElementById("arrow")var arrtxt = document.getElementById("arr")if((mnu.style.display != "bloc...
js+css+html制作下拉菜单
橘猫吃不胖的博客
11-26 5446
js+css+html制作下拉菜单1 案例需求2 编写HTML结构代码3 编写css样式4 编写JavaScript部分5 全部代码 1 案例需求 使用JavaScript+css+html制作下拉菜单，当鼠标放在菜单项时，菜单项的背景色会改变，而且会出现二级菜单，当鼠标放在二级菜单上时，二级菜单会变色，当鼠标离开菜单项后，二级菜单隐藏。 效果图： 2 编写HTML结构代码 在HTML页面代码中，先用列表把菜单的内容做出来，代码如下： <ul class="nav">
CSS3悬停展开旋转菜单特效
07-24
"CSS3悬停展开旋转菜单特效"是利用CSS3的特性来实现的一种动态效果，当鼠标悬停在某个元素（如头像）上时，会触发一个展开并旋转的二级菜单。这种特效可以增强网站的用户界面，提供更加直观且吸引人的导航体验。 ...
基于CSS grid（网格）的全屏展开式菜单特效
12-10
基于CSS Grid的全屏展开式菜单特效正是实现这一目标的一种创新方法。这个特效利用了CSS Grid布局的强大功能，结合jQuery库，为用户提供了独特且吸引人的导航体验。下面我们将深入探讨这个特效背后的关键技术和实现...
CSS3实现弹性动画展开菜单.rar_CSS3实现弹性动画展开菜单_css3展开动画_particlesdjv
09-21
综上所述，"CSS3实现弹性动画展开菜单"涉及到前端开发中的多个重要概念，包括jQuery事件处理、CSS3动画、响应式设计以及可能的粒子效果。通过巧妙地结合这些技术，我们可以构建出既美观又互动性强的网页菜单。
CSS3侧边栏卡片式菜单导航.zip
07-11
【CSS3侧边栏卡片式菜单导航】是一种流行的网页设计技术...总的来说，"CSS3侧边栏卡片式菜单导航"是一个集成了CSS3新特性的交互式设计实例，展示了如何通过CSS3来创建动态、吸引人的用户界面，同时提升网站的导航体验。
CSS中禁用DOM事件
bingmoujs的博客
08-26 489
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
css实现元素居中显示
最新发布
weixin_42812634的博客
08-29 149
css实现元素居中显示 text-align:center; margin-left:auto; margin-right:auto; width:50%; height:100px; line-height:100px; display:flex; justify-content:center; align-items:center; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); d
CSS的动画效果
weixin_71949204的博客
08-26 502
3、以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。2、创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。5、在CSS样式中，用animation属性来应用 @keyframes所定义的动画。语法： 创建动画：@keyframes 调用动画：animation。1、通过 @keyframes(关键帧动画) 规则，您能够创建动画。
CSS 知识点及使用案例
2301_78319341的博客
08-26 589
css快速入门
33.鼠标悬停时的波浪线效果 & CSS 重置
粉丝们务必加入微信粉丝群
08-25 150
通过理解这些原则,你可以创建你自己的重置,完美地适合你的项目的独特需求。这个技巧是 CSS 和 SVG 如何协同工作以创建令人兴奋的视觉效果的一个很好的例子。通过理解这些技术,你可以创建真正独特和吸引人的网页设计,给你的用户留下深刻印象。它避免了许多旧的 CSS 重置的复杂性和过度特异性,而是依靠更现代的浏览器默认值。从其中一些中汲取灵感,这里是我的自以为是的 CSS 重置,以及我选择包含每个规则的原因解释。虽然这可以工作,但它可能会使你的 CSS 难以阅读和维护,特别是如果你有多个这样的效果。
CSS实现水滴效果图
N201871643的博客
08-26 359
水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式语言。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值