68 lines
1.4 KiB
HTML
68 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>左侧菜单</title>
|
|
<style>
|
|
body,
|
|
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
height: 100%;
|
|
}
|
|
|
|
.menu,
|
|
.core_page {
|
|
height: 100%;
|
|
position: fixed;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transition: all ease 1s;
|
|
}
|
|
|
|
.menu {
|
|
left: -100%;
|
|
background: #000;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div class="menu" style="left: -100%">
|
|
菜单部分
|
|
<span>x</span>
|
|
</div>
|
|
|
|
<div class="core_page" style="left: 0%">
|
|
<div class="header">头部</div>
|
|
<div class="content">内容</div>
|
|
<div class="footer">底部</div>
|
|
</div>
|
|
|
|
</body>
|
|
<script>
|
|
var Menu = document.querySelector(".menu");
|
|
var corePage = document.querySelector(".core_page");
|
|
|
|
document.querySelector(".header").onclick = function () {
|
|
offMenu(100)
|
|
}
|
|
|
|
document.querySelector(".menu span").onclick = function () {
|
|
offMenu(-100)
|
|
}
|
|
|
|
function offMenu(offset) {
|
|
Menu.style.left =`${parseInt(Menu.style.left) + offset}%`;
|
|
corePage.style.left =`${parseInt(corePage.style.left) + offset}%`;
|
|
}
|
|
</script>
|
|
|
|
</html> |