一个简单的响应式导航栏

背景

导航对于一个网站重要性，不言而喻。网站上导航一般都置于网站的顶端，每一个导航项都直接详细的列出来，但如果需要去适配移动端的话这样简单粗暴的方法就不大可行了，因为受移动端屏幕宽度所限，在电脑端完美显示的布局在移动端可能就乱掉了（好吧，这是个人码的第一篇博客，之前也没有过写文章的经验，对于“乱掉了”这样口语化的措辞，我也很无奈啊...），所以我们需要为移动端设计专属的导航栏样式。大多数的设计是用一个汉堡按钮（好像是这么叫的？）来代替原来的导航栏，然后通过点击这个按钮来显示或隐藏之。这篇博客就算作在了解了Bootstrap的实现方法原理之后的笔记。

实现原理

直接上代码吧

• HTML部分

    <nav>
      <div class="navbar-header">
        <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
        <a href="##" class="navbar-brand">XX网</a>
      　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
        <button class="navbar-toggle" type="button">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="##">网站首页</a></li>
          <li><a href="##">系列教程</a></li>
          <li><a href="##">名师介绍</a></li>
          <li><a href="##">成功案例</a></li>
          <li><a href="##">关于我们</a></li>
          </ul>
      </div>
    </nav>

这部分几乎和Bootstrap对应代码完全一致，导航栏的HTML结构显而易见：

- nav
  - div.navbar-header
    - a.navbar-brand
    - button.navbar-toggle（汉堡按钮）
  - div.navbar-collapse（实际导航栏）
    - ul.nav

当视窗宽度大于768px时，直接显示实际导航栏就好，汉堡按钮不显示；小于768px时，显示汉堡按钮，然后实际导航栏的显示则通过点击汉堡按钮由JS来实现导航栏的隐藏和显示，两种情况下导航栏的布局考验的则是对CSS的运用，整个实现原理就是这样。

说到CSS，感觉用好这个东西来写一个布局清晰样式精美的网页很费力（应该是练的太少了，其实自己到现在写的页面，一只手都能数的过来，所以还是太急躁了吧。。。），倒不是CSS原理不懂，就是写出来的东西真没法看，人说CSS是艺术真不是假的。说这几句废话，其实我只是想拖延下贴惨不忍睹的CSS代码

• CSS部分

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
a {
  text-decoration: none;
  color: blue;
}
a:hover {
  text-decoration: underline;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  }
nav {
  height: 90px;
  padding: 20px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  background-color: lightblue;
}
.navbar-header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}     
.navbar-toggle {
  height: 37px;
  display: none;
  border: none;
  background-color: green;
  border-radius: 2px;
  cursor: pointer;
}
.navbar-toggle span {
  display: block;
  width: 2em;
  margin: 3px 0;
  border-bottom: 2px solid #fff;
}
.navbar-brand {
  display: block;
}
.navbar-nav li {
  display: inline-block;
  padding: .5em;
  background-color: lightgreen;
}

@media(max-width: 768px) {
  nav {
    display: block;
  }
  .navbar-header {
    margin-top: 6.5px;
  }  
  .navbar-toggle {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
  .collapse {
    display: none;
  } 
  .navbar-collapse {
    position: relative;
    top: 26.5px;
  }
  .navbar-collapse li {
    width: 100%;
    border-bottom: 1px solid #fff;;
    text-align: center;
  }
}

因为前些日子看了CSS3里flex的属性，刚好这里就尽量用flex来写的布局，发现属性是真好用；当然好用并不一定随随便便就能用好，所以为了让导航栏里的内容的位置在两种情况下都相对固定，凑了好几个元素的固定长度值，所以写得烂我心里是有点逼数的。

JS的部分就简单了，三条语句，获取元素A，获取元素B，在A上绑定事件，事件触发时操纵B。所以觉得JS比CSS简单是有理由的吧。

• JS部分

var toggleBtn = document.querySelector('.navbar-toggle')
var collapsedElm = document.querySelector('.navbar-collapse')
toggleBtn.addEventListener('click', function() {
  collapsedElm.classList.toggle('collapse')

代码贴完了再贴下效果图吧，主要看效果，配色什么的忽视就好了

效果图

• >786px

  
  image.png

• <786px

  
  image.png
  image.png

好了，都贴完了，就这么点东西么（图里的那么大片空白肯定是故意占地方的）？是的，就这么点……总结下。

总结

打个比方，CSS好比是一个人的外表，JS好比是能力，外表不好看都不会有表现的机会，所以包装是有必要而且关键的，同理CSS也是很重要的，先把CSS学熟练吧，起码达到写出的页面能勾起别人继续看下去的兴趣的程度。

第一篇出来就好办了，第二篇、第三篇……都会源源不断的。