Comment implémenter un menu de navigation réactif avec CSS et JS-tutoriel CSS-php.cn

Comment implémenter un menu de navigation réactif avec CSS et JS

不言

Libérer： 2018-07-24 10:31:34

original

2784 Les gens l'ont consulté

Le contenu partagé avec vous dans cet article explique comment implémenter un menu de navigation réactif avec CSS et js. Le contenu est d'une grande valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.

1. Menu de navigation réactif

Lorsque la fenêtre d'affichage est plus grande que 640 pixels, la barre de navigation sera affichée à l'extérieur lorsque la fenêtre d'affichage est plus petite. que 768px Parfois, le menu de navigation doit être masqué !
Le code est le suivant :

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

Copier après la connexion

Le code CSS est le suivant :

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

Copier après la connexion

Recommandations associées :

Comment utiliser le CSS et js pour déterminer les téléphones mobiles respectivement l'état de l'écran horizontal et vertical

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!