5.1从0实现响应式导航栏

2019-01-06 本文已影响91人空无一码

本节将分享如何从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

5.1从0实现响应式导航栏

什么是响应式导航栏

布局的常识

如何实现响应式导航栏

最终效果

猜你喜欢

热点阅读