CSS+JS相應式導航菜單

時間 2020-01-27

標籤 css+js css 相應導航菜單欄目 CSS 简体版

原文原文鏈接

響應式導航菜單

響應式導航菜單就是當網頁在其餘不一樣視口的樣式，不一樣的設備須要不一樣的樣式

須要掌握的知識

-　掌握媒體查詢，若是你不是很懂那就看我寫的CSS響應式佈局javascript

掌握CSS重的display：none;
簡單的JS方法

下面是HTML代碼css

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>響應式菜單</title>
    <link rel="stylesheet" type="text/css" href="demo01.css"/>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <div class="nav">
        <div  class="btn">
            <i id="btn" class="fa fa-bars"></i>
        </div>    
        <div class="pic"></div>
        <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>    
    </div>
</body>
</html>

CSS樣式html

*{
    margin:0;
    padding:0;
    text-decoration:none;
    list-style:none;
}
.nav{
    background:blue;
    width:100%;
    position:relative;
}
.pic{
    background:url(bottom.jpg) no-repeat;
    position:absolute;
    width:128px;
    height:46px;
    top:8px;
    left:60px;
}
.btn{
    font-size:20px;
    color:#fff;
    background:#13138a;
    display:none;
}
.btn i{
    padding:20px;
}
ul{
    margin-left:200px;
    
}
ul li{
    float:left;
}
ul li a:hover{
    background:pink;
}
ul li a{
    display:block;
    padding:20px 30px;
    color:#fff;
}
.clearfix:after{
    display:block;
    height:0;
    content:"";
    visibility:hidden;
    clear:both;
}
@media screen and (max-width:768px){
    ul li{
        float:none;
        width:100%;
        text-align:center;
    }
    ul{
        width:100%;
        display:none;
        margin:0;
    }
    .btn{
        display:block;
    }
    .pic{
        left:50%;
        margin-left:-64px;
    }
}

js代碼：java

<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 ww=document.documentElement.clientWidth;
            if(ww>768){
                menu.style.display="block";
            }
        }
        
    }
</script>