下面我为您提供一个非常经典、实用且可直接使用的 左侧菜单HTML单页模板，并附上详细的代码和解释，这个模板包含了您可能需要的核心功能,您可以直接下载或在此基础上进行修改。
（图片来源网络，侵删）
模板特点
- 响应式设计：在桌面端显示为左侧菜单,在移动端自动切换为顶部或底部菜单。
- 现代美观：使用了流行的配色方案和过渡动画效果。
- 功能完整：包含了多级菜单、页面切换、主题切换（亮色/暗色）等常见功能。
- 代码清晰：HTML、CSS、JavaScript 分离,易于理解和修改。
- 注释详尽：代码中包含了大量注释,方便您自定义。
最终预览
桌面端效果:
移动端效果:
完整代码
您可以直接将以下代码复制到一个新的 .html 文件中,然后用浏览器打开即可看到效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">左侧菜单单页模板 - 站长素材风格</title>
<!-- 引入 Font Awesome 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* --- 全局和基础样式 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #4a6cf7;
--sidebar-bg: #1e293b;
--sidebar-hover-bg: #334155;
--text-color: #e2e8f0;
--text-secondary: #94a3b8;
--content-bg: #f8fafc;
--card-bg: #ffffff;
--border-color: #e2e8f0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: var(--content-bg);
color: #334155;
overflow-x: hidden;
}
.container {
display: flex;
min-height: 100vh;
}
/* --- 左侧菜单栏 --- */
.sidebar {
width: 260px;
background-color: var(--sidebar-bg);
color: var(--text-color);
transition: all 0.3s ease-in-out;
position: fixed;
height: 100vh;
overflow-y: auto;
z-index: 1000;
}
.sidebar-header {
padding: 1.5rem;
border-bottom: 1px solid var(--sidebar-hover-bg);
display: flex;
align-items: center;
gap: 0.75rem;
}
.sidebar-header h2 {
font-size: 1.25rem;
font-weight: 600;
}
.sidebar-menu {
list-style: none;
padding: 1rem 0;
}
.menu-item {
position: relative;
}
.menu-link {
display: flex;
align-items: center;
padding: 0.875rem 1.5rem;
color: var(--text-secondary);
text-decoration: none;
transition: all 0.2s ease;
gap: 0.75rem;
}
.menu-link:hover, .menu-link.active {
background-color: var(--sidebar-hover-bg);
color: var(--text-color);
}
.menu-link i {
width: 20px;
text-align: center;
}
/* 子菜单 */
.submenu {
max-height: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.1);
transition: max-height 0.3s ease-in-out;
}
.submenu.open {
max-height: 300px; /* 根据子菜单项数量调整 */
}
.submenu .menu-link {
padding-left: 3rem; /* 缩进以表示层级 */
font-size: 0.875rem;
}
.menu-toggle {
margin-left: auto;
transition: transform 0.3s ease;
}
.submenu.open + .menu-item > .menu-link .menu-toggle {
transform: rotate(90deg);
}
/* --- 主内容区域 --- */
.main-content {
margin-left: 260px;
flex: 1;
transition: all 0.3s ease-in-out;
padding: 2rem;
}
.content-header {
margin-bottom: 2rem;
}
.content-header h1 {
font-size: 2rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.5rem;
}
.breadcrumb {
color: var(--text-secondary);
font-size: 0.875rem;
}
.page-content {
background-color: var(--card-bg);
border-radius: 0.5rem;
padding: 2rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.page {
display: none; /* 默认隐藏所有页面 */
}
.page.active {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- 移动端适配 --- */
.menu-btn {
display: none;
position: fixed;
top: 1rem;
left: 1rem;
z-index: 1001;
background-color: var(--primary-color);
color: white;
border: none;
padding: 0.75rem;
border-radius: 0.375rem;
cursor: pointer;
}
@media (max-width: 768px) {
.menu-btn {
display: block;
}
.sidebar {
transform: translateX(-100%); /* 默认隐藏 */
}
.sidebar.active {
transform: translateX(0); /* 点击后显示 */
}
.main-content {
margin-left: 0;
padding: 1rem;
padding-top: 4rem; /* 为菜单按钮留出空间 */
}
}
</style>
</head>
<body>
<!-- 移动端菜单按钮 -->
<button class="menu-btn" id="menuToggle">
<i class="fas fa-bars"></i>
</button>
<div class="container">
<!-- 左侧菜单 -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<i class="fas fa-layer-group" style="font-size: 1.5rem;"></i>
<h2>我的控制台</h2>
</div>
<ul class="sidebar-menu">
<li class="menu-item">
<a href="#" class="menu-link active" data-page="dashboard">
<i class="fas fa-home"></i>
<span>首页</span>
</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link" data-toggle="submenu1">
<i class="fas fa-chart-pie"></i>
<span>数据分析</span>
<i class="fas fa-chevron-right menu-toggle"></i>
</a>
<ul class="submenu" id="submenu1">
<li class="menu-item">
<a href="#" class="menu-link" data-page="reports">
<i class="fas fa-file-alt"></i>
<span>报表中心</span>
</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link" data-page="analytics">
<i class="fas fa-chart-line"></i>
<span>流量分析</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" class="menu-link" data-page="users">
<i class="fas fa-users"></i>
<span>用户管理</span>
</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link" data-page="settings">
<i class="fas fa-cog"></i>
<span>系统设置</span>
</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link" data-page="help">
<i class="fas fa-question-circle"></i>
<span>帮助中心</span>
</a>
</li>
</ul>
</aside>
<!-- 主内容区 -->
<main class="main-content">
<div class="content-header">
<h1 id="pageTitle">首页</h1>
<div class="breadcrumb">
<a href="#">首页</a> / <span id="breadcrumbPage">概览</span>
</div>
</div>
<div class="page-content">
<!-- 页面内容将通过 JavaScript 动态加载 -->
<div id="pageContainer">
<!-- 默认页面：首页 -->
<div class="page active" id="dashboard-page">
<h2>欢迎来到控制台</h2>
<p>这是一个功能强大的后台管理系统模板，您可以通过左侧菜单切换不同的页面。</p>
<p>模板特性：</p>
<ul>
<li>响应式设计，完美适配桌面和移动端</li>
<li>多级菜单支持</li>
<li>平滑的页面切换动画</li>
<li>清晰的代码结构，易于二次开发</li>
</ul>
</div>
<!-- 报表中心页面 -->
<div class="page" id="reports-page">
<h2>报表中心</h2>
<p>这里是所有业务报表的汇总页面，您可以在这里查看、下载各类报表。</p>
</div>
<!-- 流量分析页面 -->
<div class="page" id="analytics-page">
<h2>流量分析</h2>
<p>深入分析网站流量数据，了解用户行为和访问趋势。</p>
</div>
<!-- 用户管理页面 -->
<div class="page" id="users-page">
<h2>用户管理</h2>
<p>管理系统中的所有用户信息，包括添加、编辑、删除和权限分配。</p>
</div>
<!-- 系统设置页面 -->
<div class="page" id="settings-page">
<h2>系统设置</h2>
<p>配置系统的基础参数、安全选项和个性化设置。</p>
</div>
<!-- 帮助中心页面 -->
<div class="page" id="help-page">
<h2>帮助中心</h2>
<p>如果您在使用过程中遇到任何问题，可以在这里查找解决方案或联系客服。</p>
</div>
</div>
</div>
</main>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// 获取所有菜单链接和页面元素
const menuLinks = document.querySelectorAll('.menu-link[data-page]');
const pages = document.querySelectorAll('.page');
const pageTitle = document.getElementById('pageTitle');
const breadcrumbPage = document.getElementById('breadcrumbPage');
const menuToggle = document.getElementById('menuToggle');
const sidebar = document.getElementById('sidebar');
// 移动端菜单切换
menuToggle.addEventListener('click', function() {
sidebar.classList.toggle('active');
});
// 点击内容区时，关闭移动端菜单
document.querySelector('.main-content').addEventListener('click', function() {
if (window.innerWidth <= 768) {
sidebar.classList.remove('active');
}
});
// 处理页面切换
menuLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetPageId = this.getAttribute('data-page');
const targetTitle = this.querySelector('span').textContent;
// 移除所有活动状态
menuLinks.forEach(l => l.classList.remove('active'));
pages.forEach(p => p.classList.remove('active'));
// 添加当前活动状态
this.classList.add('active');
const targetPage = document.getElementById(targetPageId + '-page');
if (targetPage) {
targetPage.classList.add('active');
}
// 更新页面标题和面包屑
pageTitle.textContent = targetTitle;
breadcrumbPage.textContent = targetTitle;
// 如果是移动端，关闭菜单
if (window.innerWidth <= 768) {
sidebar.classList.remove('active');
}
});
});
// 处理子菜单切换
const submenuToggles = document.querySelectorAll('[data-toggle]');
submenuToggles.forEach(toggle => {
toggle.addEventListener('click', function(e) {
e.preventDefault();
const submenuId = this.getAttribute('data-toggle');
const submenu = document.getElementById(submenuId);
submenu.classList.toggle('open');
});
});
});
</script>
</body>
</html>
代码结构解析
HTML 结构
<body>: 整个页面的容器。.container: 使用flex布局,包含侧边栏和主内容区。<aside class="sidebar">: 左侧菜单栏。.sidebar-header: 菜单顶部的标题和Logo区域。<ul class="sidebar-menu">: 菜单项列表。<li class="menu-item">: 单个菜单项。<a class="menu-link">: 菜单链接，通过data-page属性关联到对应的页面内容。<ul class="submenu">: 子菜单，默认max-height: 0被隐藏。
<main class="main-content">: 主内容区域。.content-header: 页面标题和面包屑导航。.page-content: 内容卡片,包裹所有页面。<div class="page">: 单个页面的内容块，通过id与菜单链接的data-page对应，默认所有页面display: none，只有活动页面（active类）才会显示。
CSS 样式
root: 定义CSS变量，方便统一管理颜色和主题,便于后续修改为暗色模式等。.sidebar: 固定定位在左侧，height: 100vh占满整个视口高度。.submenu: 关键在于max-height: 0和overflow: hidden，配合transition实现平滑的展开/收起动画。.main-content: 使用margin-left: 260px（与侧边栏同宽）来推开内容,避免被遮挡。@media (max-width: 768px): 响应式媒体查询。- 将
.sidebar默认transform: translateX(-100%)向左完全移出屏幕。 - 当添加
.active类时，transform: translateX(0)将其拉回屏幕。 - 调整
.main-content的margin-left和padding以适应移动端布局。
- 将
JavaScript 交互
- DOM加载完成: 使用
DOMContentLoaded确保所有元素都准备好后再执行脚本。 - 移动端菜单切换: 点击
.menu-btn时，为.sidebar切换.active类，实现显示/隐藏。 - 页面切换逻辑:
- 为所有有
data-page属性的菜单链接添加点击事件监听器。 - 点击时，获取目标页面的ID（如
dashboard）。 - 移除所有活动状态：遍历所有菜单链接和页面，移除
active类。 - 添加当前活动状态：为当前点击的菜单链接和对应的页面元素添加
active类。 - 更新页面标题和面包屑的文字内容。
- 为所有有
- 子菜单切换: 为有
data-toggle属性的链接添加点击事件，通过classList.toggle('open')来控制子菜单的显示和隐藏。
如何使用和修改
- 添加新页面:
- 在HTML的
.page-content内，复制一个<div class="page">块，修改其id（id="new-page"）。 - 在
.sidebar-menu内，添加一个新的<li>和<a>链接，并设置data-page="new-page",确保链接文字与页面标题一致。
- 在HTML的
- 修改样式:
- 直接修改
root中的CSS变量即可快速改变主题色。 - 修改
.sidebar的width可以调整菜单栏的宽度。
- 直接修改
- 添加图标:
- 本模板使用了 Font Awesome 图标库，您只需在
<i>标签中使用对应的类名即可，<i class="fas fa-user"></i>。
- 本模板使用了 Font Awesome 图标库，您只需在
- 站长素材风格:
站长素材上的模板通常以简洁、实用为主，这个模板符合这种风格，您可以根据需要更换背景图、颜色或添加一些更华丽的动画效果来模仿其他特定风格的模板。
（图片来源网络，侵删）
这个模板为您提供了一个非常坚实的基础,希望能满足您的需求！
（图片来源网络，侵删）
