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

這篇文章分享給大家的內容是關於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中文網其他相關文章！