版本1
利用一段简单的css+js，实现一个二级菜单，效果如下：
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左侧二级菜单</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
}
/* 左侧菜单样式 */
.sidebar {
width: 250px;
background-color: #f4f4f4;
height: 100vh;
overflow-y: auto;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}
.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar ul li {
padding: 10px;
border-bottom: 1px solid #ddd;
}
.sidebar ul li a {
text-decoration: none;
color: #333;
display: block;
}
.sidebar ul li a:hover {
background-color: #ddd;
}
/* 二级菜单样式 */
.submenu {
display: none; /* 默认隐藏二级菜单 */
padding-left: 20px;
}
.submenu li {
padding: 8px;
}
.submenu li a {
color: #666;
}
.submenu li a:hover {
background-color: #ccc;
}
/* 激活状态的菜单 */
.submenu.active {
display: block; /* 显示二级菜单 */
}
/* 内容区域样式 */
.content {
flex: 1;
padding: 20px;
background-color: #fff;
}
.content h2 {
margin-top: 0;
}
</style>
</head>
<body>
<!-- 左侧菜单 -->
<div class="sidebar">
<ul>
<li>
<a href="#" onclick="toggleMenu(event, 'menu1')">菜单 1</a>
<ul id="menu1" class="submenu">
<li><a href="#" onclick="showContent(event, '内容 1.1')">子菜单 1.1</a></li>
<li><a href="#" onclick="showContent(event, '内容 1.2')">子菜单 1.2</a></li>
<li><a href="#" onclick="showContent(event, '内容 1.3')">子菜单 1.3</a></li>
</ul>
</li>
<li>
<a href="#" onclick="toggleMenu(event, 'menu2')">菜单 2</a>
<ul id="menu2" class="submenu">
<li><a href="#" onclick="showContent(event, '内容 2.1')">子菜单 2.1</a></li>
<li><a href="#" onclick="showContent(event, '内容 2.2')">子菜单 2.2</a></li>
</ul>
</li>
<li>
<a href="#" onclick="toggleMenu(event, 'menu3')">菜单 3</a>
<ul id="menu3" class="submenu">
<li><a href="#" onclick="showContent(event, '内容 3.1')">子菜单 3.1</a></li>
<li><a href="#" onclick="showContent(event, '内容 3.2')">子菜单 3.2</a></li>
<li><a href="#" onclick="showContent(event, '内容 3.3')">子菜单 3.3</a></li>
</ul>
</li>
</ul>
</div>
<!-- 内容区域 -->
<div class="content">
<h2>内容区域</h2>
<p id="content">点击左侧菜单查看内容。</p>
</div>
<script>
// 切换二级菜单的显示/隐藏
function toggleMenu(event, menuId) {
event.preventDefault(); // 阻止默认行为
const menu = document.getElementById(menuId);
menu.classList.toggle('active'); // 切换 active 类
}
// 显示对应菜单的内容
function showContent(event, content) {
event.preventDefault(); // 阻止默认行为
document.getElementById('content').innerText = content;
}
</script>
</body>
</html>
版本2
添加一点简单的美化效果，效果如下：
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美化左侧二级菜单</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
display: flex;
background-color: #f9f9f9;
}
/* 左侧菜单样式 */
.sidebar {
width: 250px;
background-color: #2c3e50;
height: 100vh;
overflow-y: auto;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
color: #fff;
}
.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar ul li {
padding: 0;
}
.sidebar ul li a {
text-decoration: none;
color: #ecf0f1;
display: block;
padding: 15px 20px;
transition: background-color 0.3s ease, padding-left 0.3s ease;
}
.sidebar ul li a:hover {
background-color: #34495e;
padding-left: 25px;
}
/* 一级菜单图标 */
.sidebar ul li a i {
margin-right: 10px;
}
/* 二级菜单样式 */
.submenu {
display: none; /* 默认隐藏二级菜单 */
background-color: #34495e;
}
.submenu li a {
padding-left: 40px !important; /* 二级菜单缩进 */
font-size: 14px;
color: #bdc3c7;
}
.submenu li a:hover {
background-color: #2c3e50;
color: #ecf0f1;
}
/* 激活状态的菜单 */
.submenu.active {
display: block; /* 显示二级菜单 */
}
/* 内容区域样式 */
.content {
flex: 1;
padding: 30px;
background-color: #fff;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}
.content h2 {
margin-top: 0;
color: #2c3e50;
}
.content p {
color: #555;
line-height: 1.6;
}
/* 响应式设计 */
@media (max-width: 768px) {
body {
flex-direction: column;
}
.sidebar {
width: 100%;
height: auto;
}
.content {
padding: 20px;
}
}
</style>
<!-- 引入 Font Awesome 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- 左侧菜单 -->
<div class="sidebar">
<ul>
<li>
<a href="#" onclick="toggleMenu(event, 'menu1')">
<i class="fas fa-home"></i> 菜单 1
</a>
<ul id="menu1" class="submenu">
<li><a href="#" onclick="showContent(event, '内容 1.1')">子菜单 1.1</a></li>
<li><a href="#" onclick="showContent(event, '内容 1.2')">子菜单 1.2</a></li>
<li><a href="#" onclick="showContent(event, '内容 1.3')">子菜单 1.3</a></li>
</ul>
</li>
<li>
<a href="#" onclick="toggleMenu(event, 'menu2')">
<i class="fas fa-cog"></i> 菜单 2
</a>
<ul id="menu2" class="submenu">
<li><a href="#" onclick="showContent(event, '内容 2.1')">子菜单 2.1</a></li>
<li><a href="#" onclick="showContent(event, '内容 2.2')">子菜单 2.2</a></li>
</ul>
</li>
<li>
<a href="#" onclick="toggleMenu(event, 'menu3')">
<i class="fas fa-users"></i> 菜单 3
</a>
<ul id="menu3" class="submenu">
<li><a href="#" onclick="showContent(event, '内容 3.1')">子菜单 3.1</a></li>
<li><a href="#" onclick="showContent(event, '内容 3.2')">子菜单 3.2</a></li>
<li><a href="#" onclick="showContent(event, '内容 3.3')">子菜单 3.3</a></li>
</ul>
</li>
</ul>
</div>
<!-- 内容区域 -->
<div class="content">
<h2>内容区域</h2>
<p id="content">点击左侧菜单查看内容。</p>
</div>
<script>
// 切换二级菜单的显示/隐藏
function toggleMenu(event, menuId) {
event.preventDefault(); // 阻止默认行为
const menu = document.getElementById(menuId);
menu.classList.toggle('active'); // 切换 active 类
}
// 显示对应菜单的内容
function showContent(event, content) {
event.preventDefault(); // 阻止默认行为
document.getElementById('content').innerText = content;
}
</script>
</body>
</html>
