后台菜单变成折叠
This commit is contained in:
@@ -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
@@ -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
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user