1 <!DOCTYPE HTML> 2 <html> 3 ???4 ?5 ??<head> 6 ?????<meta charset="utf-8"> 7 ?????<title>从上到下的菜单动画</title> 8 ?????<style> 9 ???????????body {10 ????margin: 0;11 ????font-family: ‘Lato‘, sans-serif;12 }13 14 .overlay {15 ????height: 0%;16 ????width: 100%;17 ????position: fixed;18 ????z-index: 1;19 ????top: 0;20 ????left: 0;21 ????background-color: rgb(0,0,0);22 ????background-color: rgba(0,0,0, 0.9);23 ????overflow-y: hidden;24 ????transition: 0.5s;25 }26 27 .overlay-content {28 ????position: relative;29 ????top: 25%;30 ????width: 100%;31 ????text-align: center;32 ????margin-top: 30px;33 }34 35 .overlay a {36 ????padding: 8px;37 ????text-decoration: none;38 ????font-size: 36px;39 ????color: #818181;40 ????display: block;41 ????transition: 0.3s;42 }43 44 .overlay a:hover, .overlay a:focus {45 ????color: #f1f1f1;46 }47 48 .overlay .closebtn {49 ????position: absolute;50 ????top: 20px;51 ????right: 45px;52 ????font-size: 60px;53 }54 55 ????</style>56 ??</head>57 ???<body>58 ?????<div class="overlay ">59 ???????<a href="#" class="closebtn" onclick="closes()">×</a>60 ???????<ul class="overlay-content" >61 ?????????<li><a href="#">首页</a></li>62 ?????????<li><a href="#">HTML</a></li>63 ?????????<li><a href="#">CSS</a></li>64 ?????????<li><a href="#">JS</a></li>65 ?????????<li><a href="#">NODE.JS</a></li>66 ?????????<li><a href="#">VUE</a></li>67 ???????</ul>68 ?????</div>69 ?????<h1>70 ???????从上到下的菜单动画,为保证全屏，要把菜单脱离文档流71 ?????</h1>72 ?????<span style="font-size:90px" onclick="show()">☰点击打开</span>73 <script>74 ???????75 function closes() {76 ???document.getElementsByClassName("overlay")[0].style.height="0%";77 }78 function show(){79 ??document.getElementsByClassName("overlay")[0].style.height="100%";80 81 ??82 }83 84 85 86 </script>87 ??</body>88 </html>JS/CSS 全屏幕导航 – 从上到下动画
原文地址：https://www.cnblogs.com/weblife/p/10259224.html