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

极简后台框架

news 2025/11/7 9:34:48

<!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>* {margin: 0;padding: 0;box-sizing: border-box;font-family: Arial, sans-serif;}body {display: flex;height: 100vh;overflow: hidden;}/* 侧边栏样式 */.sidebar {width: 220px;background-color: #2c3e50;color: white;transition: transform 0.3s ease;z-index: 10;overflow-y: auto;}.sidebar-header {padding: 20px;font-size: 18px;font-weight: bold;border-bottom: 1px solid #34495e;}/* 导航分组样式 */.nav-group {margin: 10px 0;}.group-title {padding: 15px 20px;font-weight: bold;cursor: pointer;display: flex;justify-content: space-between;align-items: center;background-color: #34495e;}.group-title .arrow {transition: transform 0.3s ease;}.group-title.expanded .arrow {transform: rotate(90deg);}/* 子菜单样式 */.submenu {list-style: none;display: none; /* 默认隐藏子菜单 */background-color: #2c3e50;}.submenu.show {display: block; /* 显示子菜单 */}.submenu li a {display: block;padding: 12px 35px; /* 缩进显示层级 */color: #bdc3c7;text-decoration: none;transition: all 0.3s;}.submenu li a:hover,.submenu li a.active {background-color: #1abc9c;color: white;}/* 主内容区 */.main-content {flex: 1;display: flex;flex-direction: column;overflow: hidden;}/* 顶部导航 */.top-nav {height: 60px;background-color: #3498db;color: white;display: flex;align-items: center;justify-content: space-between;padding: 0 20px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}.menu-toggle {cursor: pointer;font-size: 20px;}.user-info {display: flex;align-items: center;gap: 10px;}/* iframe 内容区域 */.iframe-container {flex: 1;overflow: hidden;}#contentIframe {width: 100%;height: 100%;border: none;}/* 移动端适配 */@media (max-width: 768px) {.sidebar {position: absolute;height: 100%;transform: translateX(-100%);}.sidebar.show {transform: translateX(0);}}</style>
</head>
<body><!-- 侧边栏导航（两层结构） --><div class="sidebar" id="sidebar"><div class="sidebar-header">管理系统</div><!-- 第一个分组 --><div class="nav-group"><div class="group-title expanded" data-group="dashboard-group"><span>控制台</span><span class="arrow">▶</span></div><ul class="submenu show" id="dashboard-group"><li><a href="javascript:;" data-src="dashboard.html" data-title="仪表盘">仪表盘</a></li><li><a href="javascript:;" data-src="statistics.html" data-title="数据统计">数据统计</a></li></ul></div><!-- 第二个分组 --><div class="nav-group"><div class="group-title" data-group="user-group"><span>用户管理</span><span class="arrow">▶</span></div><ul class="submenu" id="user-group"><li><a href="javascript:;" data-src="users/list.html" data-title="用户列表">用户列表</a></li><li><a href="javascript:;" data-src="users/add.html" data-title="添加用户">添加用户</a></li><li><a href="javascript:;" data-src="users/roles.html" data-title="角色权限">角色权限</a></li></ul></div><!-- 第三个分组 --><div class="nav-group"><div class="group-title" data-group="product-group"><span>产品管理</span><span class="arrow">▶</span></div><ul class="submenu" id="product-group"><li><a href="javascript:;" data-src="products/list.html" data-title="产品列表">产品列表</a></li><li><a href="javascript:;" data-src="products/categories.html" data-title="产品分类">产品分类</a></li></ul></div><!-- 第四个分组 --><div class="nav-group"><div class="group-title" data-group="system-group"><span>系统设置</span><span class="arrow">▶</span></div><ul class="submenu" id="system-group"><li><a href="javascript:;" data-src="settings/basic.html" data-title="基本设置">基本设置</a></li><li><a href="javascript:;" data-src="settings/logs.html" data-title="操作日志">操作日志</a></li><li><a href="javascript:;" data-src="https://www.baidu.com" data-title="外部链接">百度搜索</a></li></ul></div></div><!-- 主内容区域 --><div class="main-content"><!-- 顶部导航栏 --><div class="top-nav"><div class="menu-toggle" id="menuToggle">☰</div><div id="pageTitle">仪表盘</div><div class="user-info"><span>管理员</span></div></div><!-- iframe 容器 --><div class="iframe-container"><iframe id="contentIframe" src="dashboard.html"></iframe></div></div><script>// 获取DOM元素const sidebar = document.getElementById('sidebar');const menuToggle = document.getElementById('menuToggle');const groupTitles = document.querySelectorAll('.group-title');const submenuLinks = document.querySelectorAll('.submenu a');const contentIframe = document.getElementById('contentIframe');const pageTitle = document.getElementById('pageTitle');// 侧边栏切换menuToggle.addEventListener('click', () => {sidebar.classList.toggle('show');});// 分组标题点击事件（展开/折叠子菜单）groupTitles.forEach(title => {title.addEventListener('click', () => {const groupId = title.getAttribute('data-group');const submenu = document.getElementById(groupId);// 切换当前分组的展开状态title.classList.toggle('expanded');submenu.classList.toggle('show');});});// 子菜单链接点击事件（切换iframe内容）submenuLinks.forEach(link => {link.addEventListener('click', () => {// 移除所有子链接的激活状态submenuLinks.forEach(l => l.classList.remove('active'));// 添加当前链接的激活状态link.classList.add('active');// 更新iframe的src属性，加载对应页面const targetSrc = link.getAttribute('data-src');contentIframe.src = targetSrc;// 更新页面标题const title = link.getAttribute('data-title');pageTitle.textContent = title;// 移动端自动关闭侧边栏if (window.innerWidth <= 768) {sidebar.classList.remove('show');}});});</script>
</body>
</html>

主要特点说明：

两层导航结构：
- 外层为分组（如 "控制台"、"用户管理" 等）
- 内层为具体导航链接（每个分组包含多个子链接）
- 分组可点击展开 / 折叠，默认第一个分组展开
交互功能：
- 点击分组标题可展开 / 折叠对应的子菜单（箭头会旋转提示状态）
- 点击子链接会激活当前项，并更新右侧 iframe 的 src
- 顶部标题会随点击的链接动态变化
- 移动端点击链接后自动关闭侧边栏
样式设计：
- 分组标题有深色背景区分层级
- 子链接有缩进效果，视觉上区分层级
- 激活的子链接有高亮背景
- 展开 / 折叠有平滑过渡动画
使用方法：
- 如需添加新分组，复制整个nav-group结构并修改内容
- 子链接的data-src属性填写目标页面地址（本地文件或外部 URL）
- data-title属性用于设置顶部显示的标题