背景
导航对于一个网站重要性，不言而喻。网站上导航一般都置于网站的顶端，每一个导航项都直接详细的列出来，但如果需要去适配移动端的话这样简单粗暴的方法就不大可行了，因为受移动端屏幕宽度所限，在电脑端完美显示的布局在移动端可能就乱掉了（好吧，这是个人码的第一篇博客，之前也没有过写文章的经验，对于“乱掉了”这样口语化的措辞，我也很无奈啊...），所以我们需要为移动端设计专属的导航栏样式。大多数的设计是用一个汉堡按钮（好像是这么叫的？）来代替原来的导航栏，然后通过点击这个按钮来显示或隐藏之。这篇博客就算作在了解了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学熟练吧，起码达到写出的页面能勾起别人继续看下去的兴趣的程度。
第一篇出来就好办了，第二篇、第三篇……都会源源不断的。
