CSSとJSでレスポンシブナビゲーションメニューを実装する方法-CSSチュートリアル-php.cn

CSSとJSでレスポンシブナビゲーションメニューを実装する方法

不言

リリース： 2018-07-24 10:31:34

オリジナル

2699 人が閲覧しました

この記事で共有した内容は、CSS と JS を使用してレスポンシブナビゲーションメニューを実装する方法に関するもので、非常に参考になる内容であり、困っている友人のお役に立てれば幸いです。

1. 応答性の高いナビゲーションメニュー

ビューポートが 640 ピクセルより大きい場合、ナビゲーションバーが表示されます。ビューポートが 768 ピクセルより小さい場合、ナビゲーションメニューを非表示にする必要があります。
コードは次のとおりです:

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

ログイン後にコピー