java响应式导航栏原理_一个简单的响应式导航栏

背景

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

实现原理

直接上代码吧

HTML部分

XX网

• 网站首页
• 系列教程
• 名师介绍
• 成功案例
• 关于我们

这部分几乎和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学熟练吧，起码达到写出的页面能勾起别人继续看下去的兴趣的程度。

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