JS/CSS 全屏幕导航 – 从上到下动画

 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()">&times;</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()">&#9776;点击打开</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>

 

相关文章