129 lines
2.7 KiB
HTML
129 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Drawer Menu</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: sans-serif;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Drawer 背景遮罩 */
|
|
.drawer-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.35);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.drawer-overlay.show {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Drawer 主体 */
|
|
.drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
right: -280px; /* 初始隐藏 */
|
|
width: 280px;
|
|
height: 100%;
|
|
background: #fff;
|
|
box-shadow: -2px 0 10px rgba(0,0,0,0.1);
|
|
transition: 0.3s;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.drawer.show {
|
|
right: 0;
|
|
}
|
|
|
|
/* Drawer 顶部标题 */
|
|
.drawer-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* 分组标题 */
|
|
.group-title {
|
|
margin: 20px 0 8px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #777;
|
|
}
|
|
|
|
/* 每个功能按钮 */
|
|
.drawer-item {
|
|
padding: 12px 10px;
|
|
border-radius: 8px;
|
|
background: #f8f8f8;
|
|
margin-bottom: 10px;
|
|
cursor: pointer;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.drawer-item:hover {
|
|
background: #ececec;
|
|
}
|
|
|
|
/* 打开 Drawer 按钮（演示用） */
|
|
.open-btn {
|
|
margin: 30px;
|
|
padding: 10px 20px;
|
|
background: #0080ff;
|
|
color: #fff;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="open-btn" onclick="openDrawer()">打开菜单</div>
|
|
|
|
<!-- 遮罩 -->
|
|
<div class="drawer-overlay" id="drawerOverlay" onclick="closeDrawer()"></div>
|
|
|
|
<!-- Drawer -->
|
|
<div class="drawer" id="drawer">
|
|
<div class="drawer-title">功能菜单</div>
|
|
|
|
<div class="group-title">账单操作</div>
|
|
<div class="drawer-item">新增账单</div>
|
|
<div class="drawer-item">批量管理</div>
|
|
<div class="drawer-item">分类管理</div>
|
|
|
|
<div class="group-title">数据统计</div>
|
|
<div class="drawer-item">月度报表</div>
|
|
<div class="drawer-item">年度报表</div>
|
|
<div class="drawer-item">图表分析</div>
|
|
|
|
<div class="group-title">设置</div>
|
|
<div class="drawer-item">预算管理</div>
|
|
<div class="drawer-item">数据导出</div>
|
|
<div class="drawer-item">云同步</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function openDrawer() {
|
|
document.getElementById("drawer").classList.add("show");
|
|
document.getElementById("drawerOverlay").classList.add("show");
|
|
}
|
|
function closeDrawer() {
|
|
document.getElementById("drawer").classList.remove("show");
|
|
document.getElementById("drawerOverlay").classList.remove("show");
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|