本节将分享如何从0实现一个响应式导航栏。
响应式导航栏是静态网站特别常见的需求，多数网站都是基于Twitter推出的Bootstrap。所以掌握从0开发一个响应式导航栏的前端很少，本节将带大家一探究竟。
什么是响应式导航栏
要想 知道什么是响应式导航栏，我们需要从两个方面去理解：
- 首先，是导航栏的定义：指位于页面顶部或者侧边区域的一排水平导航按钮，起着链接站点或者软件内的各个页面的作用；
- 其次，是响应式的定义：响应式确切称为响应式布局，是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本，它是为解决移动互联网浏览而诞生的。
结合响应式布局和导航栏的概念，我们就知道我们要实现的是一组兼容不同终端的导航按钮。
布局的常识
网页制作最重要的就是网页布局，先布局，后细节，只有在选择了合适的网站布局以后，才可以顺利的进行接下来的工作。
好的网页布局能够让前端开发人员更好地把握网页的整体结构，提高代码的书写效率，复用性，和后期维护。
常见的布局有：
- 静态布局：即最开始的网页设计，所有的网页尺寸都用px作为单位；
- 流式布局：使用%百分比定义宽度，页面元素宽度按照屏幕分辨率进行适配调整，元素大小会变化但整体布局不便，需要配合max-width或min-width等属性控制尺寸流动范围，如栅格系统；
- 自适应布局：分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个范围；
- 响应式布局：结合流水布局和自适应布局，搭配媒体查询技术的使用，元素位置和大小都会变，适应pc和移动端，和自适应一样，都需要检测设备，根据不同设备展示不同的样式；
- 弹性布局：包裹文字各元素的尺寸采用em/rem(为顺应不同网页字体大小展现而产生的，em相对其父元素，rem始终相对页面根元素)做单位，而页面主要划分区域的尺寸仍使用百分数或px，浏览器默认字体16px，所以1 em = 16px，为了计算方便通常将页面根元素设置为62.5%，1 rem = 10px。
布局选择建议：
- 如果只做PC端，静态布局是最好的选择；
- 如果只做移动端，且高度和元素间距不高，弹性布局是最好的选择；
- 如果兼容PC和移动端，响应式布局是最好的选择。
显然，我们要做的响应式导航栏就是要兼容多端，所以需要采用响应式布局。
如何实现响应式导航栏
- 设置 Meta 标签：大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在
<head>标签里加入这个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。
- 首先，设定页面的大体布局，在index.html文件中加入如下内容：
<header>
<nav>
<div class="navbar-header">
<a href="#" class="navbar-logo">Logo</a>
<button class="navbar-toggle" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="navList">
<li><a href="#" class="active">首页</a></li>
<li><a href="#">产品服务</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</nav>
</header>
<section class="content-wrap">
<!-- 网站内容 -->
<img src="skills.jpg" alt="前端技能图">
</section>
<footer class="foot-wrap">
<p>©2018 慕课网学习 </p>
<p>京ICP备180043275号-2</p>
</footer>
其中，header标签包含的是导航栏的部分，section标签包含的是前端技能图的部分，footer标签包含的是页脚部分。
然后在index.css中，添加如下的css样式：
* {
box-sizing: border-box;
}
body {
margin: 0;
}
button:focus {
outline: none;
}
a {
text-decoration: none;
color: white;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav {
height: 60px;
padding: 20px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
background-color:#171717;
}
.navbar-header {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.navbar-toggle {
height: 37px;
width: 30%;
text-align: center;
display: none;
border: none;
background-color: #171717;
}
.navbar-toggle span {
display: block;
width: 30px;
margin: 3px 0;
border-bottom: 2px solid #fff;
}
.navbar-logo {
display: block;
}
.navbar-nav li {
display: inline-block;
padding: 0.5em;
}
.navbar-nav li a{
border-radius:3px;
padding:4px 8px;
}
.navbar-nav li a:hover{
color:#171717;
background-color:#fff;
box-shadow:1px 1px 1px 0 #fff
}
.active {
color:#171717;
background-color:#fff;
box-shadow:1px 1px 1px 0 #fff
}
.content-wrap {
height: calc(100% - 196px);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.content-wrap img{
height: 100%;
width: auto;
}
.foot-wrap {
width: 100%;
height: 120px;
line-height: 50px;
text-align: center;
background-color: #695f5f;
}
@media(max-width: 768px) {
nav {
display: block;
padding: 0px;
}
.navbar-header {
padding: 10px 0px 10px 10px;
}
.navbar-toggle {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 30%;
text-align: center;
}
.collapse {
display: none;
}
.navbar-collapse {
height: 100%;
width:30%;
right: 0;
position:fixed;
background-color:#171717;
}
.navbar-collapse li {
width: 100%;
border-bottom: 1px solid #fff;;
text-align: center;
}
}
最后，在在index.html文件中的body标签的底部添加js控制的相关代码：
<script>
var toggleButton = document.querySelector('.navbar-toggle');
var collapsedElm = document.querySelector('.navbar-collapse');
toggleButton.addEventListener('click', function() {
collapsedElm.classList.toggle('collapse');
});
var navList = document.getElementById('navList');
var oList=navList.getElementsByTagName("a");
for(var i=0;i<oList.length;i++){
oList[i].onclick=function(){
for(var j=0;j<oList.length;j++){
oList[j].className="";
}
this.className+="active";
}
}
</script>
最终效果
-
pc 端效果：
Screen Shot 2019-01-06 at 1.47.02 PM.png -
h5移动端效果：
Screen Shot 2019-01-06 at 1.47.28 PM.png
点击折叠导航栏后：
Screen Shot 2019-01-06 at 1.48.53 PM.png
