一个网站简单兼容简洁的自适应导航栏代码

笑哥2018-10-14笑哥共享网

大家在网上经常看到很多网站都是用自适应的网站的导航栏，包括我们笑网也是。

小笑看很多人都不知道如何操作，所以将代码分享给大家。

原理很简单，利用css的media，进行限制，在手机版访问的时候将导航栏进行隐藏，利用按钮点击进行显示导航。

这是我自己折腾的一个超简单的自适应导航栏，整体思路也简单。

首先是导航栏的html结构是这样的：

然后到js代码，需要jquery 支持

$(".nav-on").click(function(){
$(".nav>ul").slideToggle();
});

尝试解释下：用css查询判断，在电脑端的时候导航栏是正常显示的，导航栏触发按钮”“则隐藏起来。

当用户是用手机访问的时候，则把导航栏的<ul>做隐藏，然后用js操作点击导航栏触发按钮则显示整个<ul></ul>里面的内容。

最后大概写一个css出来：

.nav{line-height:50px;background: #0099cc;position: relative;}
.nav li{float:left;}
.nav li a{display:block;padding:0 20px;color:#fff;}
.nav span.nav-on{display:none;width:20px;position: absolute;top:12px;right:12px;cursor: pointer;}
.nav-on i{display:block;width:100%;height:5px;background:#fff;margin-bottom:5px;}
/*手机端css代码*/
@media screen and (max-width:768px){
.nav ul{display:none;width:100%;}
.nav ul li{width:100%;}
.nav span.nav-on{display:block;}
}

如果需要css美化则需要根据自己的需求来做，本文只提供一个办法参考。

笑哥自己弄的！所以，肯定安全，肯定能让你省钱，肯定也能让你赚钱！肯定是真的！放心加！前两天加不上本微信号，现在已经恢复了，请大家重新加一下！
您只需要把淘宝【天猫】商品链接分享发送给下面微信机器人号,既可为自动您搜索到隐藏优惠券+收货红包奖励,先领券,再下单,购物一年下来最少省几万块钱！
扫码加不上，请搜索微信号：blm737669552