极简后台框架

html 复制代码

<!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属性用于设置顶部显示的标题

这种结构适合功能较多的后台系统，通过分组可以更好地组织导航菜单，提高用户体验。