移動端側滑導航程式碼
阿新 • • 發佈：2018-12-17
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html{font-size: 62.5%;} *{ margin: 0; padding: 0; } body{ font-size: 1.5rem; color: #333333; background: white; height: 100%; } html,body{ height: 100%; } header,footer{ position: fixed; left: 0; right: 0; text-align: center; height: 44px; line-height: 44px; z-index: 1; background: blue; color: white; } header{ border-bottom: 2px black solid; top: 0; } footer{ border-top: 2px black solid; bottom: 0; } .page-title{ font-size: 1.8rem; font-weight: normal; } .btn-slide-bar{ width: 44px; height: 44px; display: block; float: left; line-height: 2.8; cursor: pointer;/*滑鼠變手*/ } .btn-slide-bar::after{/*麵包屑導航*/ content: ""; width: 20px; height: 2px; background: #999; display: inline-block; /*文字屬性*/ box-shadow:0 7px 0 #999,0 -7px 0 #999; } .parwer-page{ position: absolute; top: 44px; right: 0; left: 0; overflow: hidden; } .slide-bar{ position: absolute; top: -1px; bottom: -1px; background: #333333; width: 150px; left: 0; z-index: 2; transform: translateX(-150px); -moz-transform: translateX(-150px); -o-transform: translateX(-150px); -webkit-transform: translateX(-150px); -ms-transform: translateX(-150px); transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; } .slide-bar li{ list-style: none; height: 40px; text-align: center; line-height: 40px; color: white; border-bottom: 2px solid #000000; } body{ transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2 ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; } body.active{ transform: translateX(150px); -moz-transform: translateX(150px); -o-transform: translateX(150px); -webkit-transform: translateX(150px); -ms-transform: translateX(150px); transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; } </style> </head> <body> <header> <span class="btn-slide-bar"> </span> <h1 class="page-title"> 首頁 </h1> </header> <section class="parwer-page">內容</section> <footer>底部</footer> <section class="slide-bar"> <ul> <li>css</li> <li>js</li> <li>html</li> <li>node</li> </ul> </section> <script type="text/javascript"> //將我們的dom樹載入完畢以後執行 它不會去理會js ，css 影象 是否載入完畢 document.addEventListener("DOMContentLoaded",function(){ (function(){ var _btn = document.querySelector(".btn-slide-bar"), _body = document.querySelector("body"); _btn.onclick = function(){ _body.classList.toggle("active") } })(window) }) </script> </body> </html>