当前位置：首页 > news >正文

前端：纯HTML、CSS和JS菜单样式

news 来源：原创 2025/4/29 5:59:22

实现了一个多级折叠菜单系统，使用纯HTML、CSS和JavaScript（无任何框架）

一、二级菜单展开

1、实现效果

初始状态-展示全部一级菜单

选中共状态，一级标题选中共为蓝色背景色，二级标题选中共为蓝色文字，展开右侧图标为-,后缩状态右侧图标为+

2、实现

HTML结构

<ul class="menu"><li class="menu-item"><div class="menu-header"><a href="#" class="menu-link">一级标题</a><span class="toggle">+</span></div><ul class="submenu"><li><a href="#" class="submenu-link">子菜单项</a></li><!-- 更多子项... --></ul></li><!-- 更多一级菜单... -->
</ul>

层级关系：menu > menu-item > menu-header + submenu
关键元素：
- .menu-header - 可点击的菜单标题区域
- .toggle - 控制展开/折叠的"+"/-"按钮
- .submenu - 默认隐藏的子菜单容器

CSS样式

.menu-header {display: flex; /* Flex布局实现水平排列 */align-items: center; /* 垂直居中 */justify-content: space-between; /* 左右分散对齐 */background-color: #76787b; /* 灰色背景 */transition: background-color 0.3s ease; /* 悬停动画 */
}.submenu {display: none; /* 初始隐藏子菜单 */padding-left: 30px; /* 缩进效果 */background-color: #f1f1f1; /* 浅灰色背景 */
}.active .menu-header {background-color: #0096c7; /* 选中状态蓝色高亮 */
}

布局特点：
- 使用Flexbox实现菜单标题和切换按钮的完美对齐
- 子菜单默认隐藏（display: none）
- 通过缩进(padding-left)实现层级视觉区分

JavaScript交互

function toggleSubmenu(item) {const submenu = item.querySelector('.submenu');const toggle = item.querySelector('.toggle');if (submenu.style.display === 'block') {// 折叠逻辑submenu.style.display = 'none';toggle.textContent = '+';} else {// 展开逻辑submenu.style.display = 'block';toggle.textContent = '-';}
}

核心功能：
1. 点击菜单头时切换子菜单显示状态
2. 自动关闭其他菜单（保持单开模式）
3. 视觉反馈：
  - 切换"+"和"-"图标
  - 添加.active类改变背景色

关键实现技巧

纯CSS隐藏/显示：通过display: none/block控制子菜单显隐
状态管理：用.active类标记当前展开的菜单项
事件委托：直接给每个菜单头绑定点击事件（适合简单结构）
视觉层次：通过背景色和缩进区分不同级别菜单

实现代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Multi-Level Menu with Flexbox</title><style>/* styles.css */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}.menu-container {padding: 20px;}.menu {list-style-type: none;padding: 0;margin: 0;width:400px;}.menu-header {display: flex;/* 使用 Flexbox 布局 */align-items: center;/* 垂直居中对齐 */justify-content: space-between;/* 图标和文字之间的间距 */padding: 10px 20px;background-color: #76787b;color: white;cursor: pointer;transition: background-color 0.3s ease;border:1px solid #fff;}.menu-header:hover {background-color: #444;}.toggle {font-size: 20px;color: white;}.menu-link {color: white;text-decoration: none;flex-grow: 1;/* 让链接占据剩余空间 */}.submenu {list-style-type: none;padding-left: 30px;display: none;/* 初始状态下隐藏子菜单 */background-color: #f1f1f1;}.submenu-link {display: block;padding: 5px 0;colo