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 중국어 웹사이트의 기타 관련 기사를 참조하세요!