5.1从0实现响应式导航栏

本节将分享如何从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标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。

• 首先，设定页面的大体布局，在index.html文件中加入如下内容：

    

        

            

              Logo
              
                
                
                
              
            
            

              

                
首页
                
产品服务
                
联系我们
                
关于我们
               
            
          
    
    

      
      
    
    

        
©2018 慕课网学习 
        
京ICP备180043275号-2
    

其中，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控制的相关代码：

最终效果

• 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