CSS와 JS를 사용하여 반응형 탐색 메뉴를 구현하는 방법-CSS 튜토리얼-php.cn

CSS와 JS를 사용하여 반응형 탐색 메뉴를 구현하는 방법

不言

풀어 주다： 2018-07-24 10:31:34

원래의

2774명이 탐색했습니다.

이 글에서 공유한 내용은 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;
    }
}

로그인 후 복사