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 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 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>