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

小编百度了一下，折磨出这么一个方法然后将代码共享给大家。

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

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

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

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

$(".nav-on").click(function(){

   $(".nav>ul").slideToggle();

});

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

当用户是用手机拜访的时分，则把导航栏的

做隐藏，然后用js操作点击导航栏触发按钮则显示整个
里面的内容。

最终大概写一个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美化则需要根据自己的需求来做，本文只提供一个方法参阅。