后台菜单变成折叠

This commit is contained in:
2026-08-05 00:26:40 +08:00
parent ed5a6c043e
commit 0b27aafdc4
3 changed files with 72 additions and 11 deletions
+9
View File
@@ -34,6 +34,15 @@ document.addEventListener('DOMContentLoaded', () => {
});
});
document.querySelectorAll('.menu-group-header').forEach(button => {
button.addEventListener('click', () => {
const group = button.closest('.menu-group');
if (group) {
group.classList.toggle('collapsed');
}
});
});
// 登录表单
document.getElementById('login-form').addEventListener('submit', handleLogin);
+21 -9
View File
@@ -16,15 +16,27 @@
</div>
<nav class="menu">
<a href="#dashboard" class="menu-item active" data-page="dashboard">仪表盘</a>
<a href="#posts" class="menu-item" data-page="posts">文章管理</a>
<a href="#categories" class="menu-item" data-page="categories">分类管理</a>
<a href="#tags" class="menu-item" data-page="tags">标签管理</a>
<a href="#pages" class="menu-item" data-page="pages">页面管理</a>
<a href="#comments" class="menu-item" data-page="comments">评论管理</a>
<a href="#users" class="menu-item" data-page="users">用户管理</a>
<a href="#files" class="menu-item" data-page="files">文件管理</a>
<a href="#themes" class="menu-item" data-page="themes">主题管理</a>
<a href="#settings" class="menu-item" data-page="settings">基础设置</a>
<div class="menu-group open">
<button class="menu-group-header" type="button">内容管理</button>
<div class="menu-sub">
<a href="#posts" class="menu-item" data-page="posts">文章管理</a>
<a href="#categories" class="menu-item" data-page="categories">分类管理</a>
<a href="#tags" class="menu-item" data-page="tags">标签管理</a>
<a href="#pages" class="menu-item" data-page="pages">页面管理</a>
<a href="#comments" class="menu-item" data-page="comments">评论管理</a>
</div>
</div>
<div class="menu-group open">
<button class="menu-group-header" type="button">系统管理</button>
<div class="menu-sub">
<a href="#users" class="menu-item" data-page="users">用户管理</a>
<a href="#files" class="menu-item" data-page="files">文件管理</a>
<a href="#themes" class="menu-item" data-page="themes">主题管理</a>
<a href="#settings" class="menu-item" data-page="settings">基础设置</a>
</div>
</div>
</nav>
<div class="user-info">
<span id="username">Admin</span>
+42 -2
View File
@@ -43,12 +43,52 @@ body {
padding: 10px 0;
}
.menu-group {
margin: 4px 12px 8px;
border-radius: 6px;
overflow: hidden;
background: rgba(255,255,255,0.04);
}
.menu-group-header {
width: 100%;
border: none;
background: transparent;
color: #fff;
text-align: left;
padding: 12px 16px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.5px;
}
.menu-group-header::after {
content: '▾';
float: right;
color: rgba(255,255,255,0.6);
}
.menu-group.collapsed .menu-group-header::after {
content: '▸';
}
.menu-sub {
display: block;
padding-bottom: 4px;
}
.menu-group.collapsed .menu-sub {
display: none;
}
.menu-item {
display: block;
padding: 12px 20px;
color: rgba(255,255,255,0.7);
padding: 10px 20px 10px 32px;
color: rgba(255,255,255,0.75);
text-decoration: none;
transition: all 0.3s;
font-size: 14px;
}
.menu-item:hover,