首頁 >web前端 >css教學 >css和js如何實現響應式導航選單

css和js如何實現響應式導航選單

不言
不言原創
2018-07-24 10:31:342903瀏覽

這篇文章分享給大家的內容是關於css和js如何實現響應式導航選單,內容很有參考價值,希望可以幫到有需要的小夥伴。

1.響應式導覽選單

當視窗大於640px的時候,導覽條會顯示在外,當視窗小於768px的時候,導覽選單需要隱藏起來!
程式碼如下:

nbsp;html>


    <meta>
    <meta>
    <title>响应式</title>

    <link>
    <link>




    <p>
    </p><p></p>
        <p>
            <i></i>
        </p>
        
                
  • 首页
  •             
  • 产品
  •             
  • 购买
  •             
  • 服务
  •             
  • 联系
  •                  
                   <script> 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>

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

相關推薦:

如何用css和js移動端分別判斷手機橫豎螢幕的狀態

以上是css和js如何實現響應式導航選單的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn