来源于:
https://siitake.cn/tools/fullScreenMenu/
单击按钮,下滑一个覆盖页面。
源代码如下:
<!DOCTYPE html>
<html>
<head>
<title>fullScreenMenu</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#woShiCaiDan {
position: fixed;
top: -100vh;
left: 0;
width: 100vw;
height: 100vh;
background-color: skyblue;
transition: top .3s;
}
.open {
top: 0!important;
}
#woShiAnNiu {
position: fixed;
top: 100px;
right: 100px;
display: block;
border: 1px solid black;
border-radius: 3px;
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="woShiCaiDan"></div>
<span id="woShiAnNiu" onclick="qieHuanCaiDan()">MENU</span>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var qieHuanCaiDan = function() {
$("#woShiCaiDan").toggleClass("open");
}
</script>
</body>
</html>