纯css实现网页自适应导航栏

相信很多人都对自适应导航栏比较感兴趣,但是网上的教程大都千篇一律是利用JS代码进行控制和实现的,难道纯CSS代码就不能实现吗? 这篇文章就给大家一个确定的答案,纯css代码是可以实现自适应导航栏的,主要原理就是利用checkbox的checked属性,下面给出实例代码,以供大家研究使用。
Css代码如下:


    *{
    padding:0;
    margin:0;
    }
  
.top{
    width: 100%;
    height: 40px;
    background: #3E78B2;
    text-align: center;
    color: white;
    line-height: 40px;
}

.nav{
    width: 100%;
    height: 50px;
    background: #3E78B2;
}

.nav ul{
    width: 100%;
    height: auto;
    list-style: none;
    background: #4bc2c5;
    text-align: center;

    
}

.nav ul li{
    list-style: none;
    display: inline-block;
    width: 150px;
    height: 50px;
    background: #47b8e0;
    line-height: 50px;
    text-align: center;
}

.nav ul li:hover{
    background: #4d638c;
}

a{text-decoration:none;
  outline: none; 
  color: white;
 }

.menu{
  width: 100%; 
  height: 40px; 
  text-align: center;
  display: none;
  line-height: 40px;
  color: #fff;
  background: deepskyblue;
  outline: none;
  border: none;
  cursor: pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
}

#switch{
  display:none;
}

#switch:checked~.nav{
  display:block;
}


@media(max-width:800px){
.menu{
      display:block;
     }
.nav{
     display:none;
     height: auto;
     border-top: 1px solid #000;
     }
.nav ul li{
     width: 100%;
     border-bottom: 1px solid #000;
         }
}

html代码:

<html>
<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>纯CSS实现自适应导航</title>
<link rel="stylesheet" type="text/css" href="./css.css">

</head>
<body>
<div class="top">纯CSS实现自适应导航</div>
<div class="menu"><label for="switch" style="display:block;width:100%;">主要菜单</label></div>
<input type="checkbox" name="" id="switch" />
<div class="nav">
微信图片_20200410110512.png
</div>
</body>
</html>

效果图:0.png1.png2.png

标签: none

添加新评论