這篇文章分享給大家的內容是關於css和js如何?響應式導覽功能表,內容很有參考價值,希望可以幫到有需要的小夥伴。
1.響應式導覽功能表
當視口大於640px的時候,導航條會顯示在外,當視口小於768px的時候,導覽功能表需要隱藏起來!
代碼如下:
<!doctype html><html><head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width"> <title>響應式</title> <link rel="stylesheet" type="text/css" href="demo1.css"/> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"></head><body> <p class="nav"> <p class="pic"></p> <p class="btn"> <i id="btn" class="fa fa-bars"></i> </p> <ul id="menu" class="clearfix"> <li><a href="#">首頁</a></li> <li><a href="#">產品</a></li> <li><a href="#">購買</a></li> <li><a href="#">服務</a></li> <li><a href="#">聯絡</a></li> </ul> </p> <script type="text/javascript"> var btn=document.getElementById("btn"); var menu=document.getElementById("menu"); btn.onclick=function(){ if(menu.style.display=="block"){ menu.style.display="none"; } else{ menu.style.display="block"; } window.onresize=function(){ var vw=document.documentElement.clientWidth; if(vw>640){ menu.style.display="block"}; } } </script></body></html>
css代碼如下:
body{ margin:0;}.nav{ background-color:black; width:100%; position:relative;}.nav ul{ margin:0; padding:0; width:80%; margin:0 auto;}.clearfix:after{ display:block; content:""; height:0; clear:both; visibility:hidden;}.nav ul li{ list-style:none; float:left;}.nav ul li a{ color:white; padding:20px 30px; display:block; text-decoration:none;}.nav ul li a:hover{ background-color:red;}.pic{ background:url(logo.jpg) no-repeat; position:absolute; top:5px; left:5px; width:113px; height:39px;}.btn{ background-color:#333; text-align:right; color:white; font-size:20px; padding:10px; display:none;}@media screen and (max-width:640px){ .nav ul li{ float:none; text-align:center; } .nav ul{ width:100%; } .btn{ display:block; } .pic{ position:absolute; left:50%; margin-left:-56px; }}