前端页面响应式开发导航

由前端开发者 · 2018年8月4日21:44:36

摘要：web前端开发视频传智播客|前端开发面试的js的问题|前端开发还是后端开发有前途很多网站的导航都是响应式设计的，最常见的就是在小屏幕设备上导航条会产生折叠，这到底是如何做到的呢？今天我们就来说说响应式导航……

web前端开发视频传智播客|前端开发面试的js的问题|前端开发还是后端开发有前途

很多网站的导航都是响应式设计的，最常见的就是在小屏幕设备上导航条会产生折叠，这到底是如何做到的呢？今天我们就来说说响应式导航。首先还是摆出一个栗子，看看bootstrap的导航，然后我们再来分析他的实现原理。

代码片段 1

<!DOCTYPE html>

<html>

<head>

<title>响应式导航</title>

</head>

<body>

<!– Brand and toggle get grouped for better mobile display –>

<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″

aria-expanded=”false”>

<span class=”sr-only”>Toggle navigation</span>

</button>

<a class=”navbar-brand” href=”#”>Brand</a>

</div>

<!– Collect the nav links, forms, and other content for toggling –>

<a href=”#”>Link

<span class=”sr-only”>(current)</span>

</a>

</li>

<li>

</li>

<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>Dropdown

</a>

<li>

<a href=”#”>Action</a>

</li>

<li>

<a href=”#”>Another action</a>

</li>

<li>

<a href=”#”>Something else here</a>

</li>

<li>

<a href=”#”>Separated link</a>

</li>

<li>

<a href=”#”>One more separated link</a>

</li>

</ul>

</li>

</ul>

</div>

<button type=”submit” class=”btn btn-default”>Submit</button>

</form>

<li>

</li>

<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>Dropdown

</a>

<li>

<a href=”#”>Action</a>

</li>

<li>

<a href=”#”>Another action</a>

</li>

<li>

<a href=”#”>Something else here</a>

</li>

<li>

<a href=”#”>Separated link</a>

</li>

</ul>

</li>

</ul>

</div>

<!– /.navbar-collapse –>

</div>

<!– /.container-fluid –>

</nav>

</body>

</html>

当屏幕尺寸变小时，采用折叠的方式，将很多元素隐藏起来，为小屏幕设备提供了更多的空间。这样的设计还是相当有趣的，可是到底是如何实现的呢？我们来慢慢说。
首先我们来说最重要的一个元素，那就是navbar-toggle类，他是屏幕缩小时显示出来的按钮。我们来看看他的css样式，或许对你有所启发。

.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle:focus {
outline: 0;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}[/code]可以看出，当屏幕尺度大于768px，该按钮隐藏，小于768时，向右浮动。回想下我们刚刚的例子，是不是确实是这样的。接下来，我们来看看下这个按钮如何工作。
我们可以看到，他有一个data-toggle=”collapse”的属性，这不就是data方式引用bootstrap插件吗？不错，他引入了collapse插件。我们来看一个简单的例子。

代码片段 2

<!DOCTYPE html>

<html>

<head>

<title>响应式导航</title>

</head>

<body>

list items

</a>

<li class=”list-group-item”>Cras justo odio</li>

<li class=”list-group-item”>Dapibus ac facilisis in</li>

<li class=”list-group-item”>Morbi leo risus</li>

<li class=”list-group-item”>Porta ac consectetur ac</li>

<li class=”list-group-item”>Vestibulum at eros</li>

</ul>

</div>

</body>

</html>

是不是和我们看到的展开式菜单很像了呢。collapse插件很简单，里面只是最主要的两个方法是show和hide方法，就拿show方法举例，我们来看一下关键代码。

this.$element
.removeClass(‘collapse’)
.addClass(‘collapsing’)dimension
.attr(‘aria-expanded’, true)

this.$trigger
  .removeClass('collapsed')
  .attr('aria-expanded', true)

this.transitioning = 1

var complete = function () {
  this.$element
    .removeClass('collapsing')
    .addClass('collapse in')[dimension]('')
  this.transitioning = 0
  this.$element
    .trigger('shown.bs.collapse')
}

if (!$.support.transition) return complete.call(this)

var scrollSize = $.camelCase(['scroll', dimension].join('-'))

this.$element
  .one('bsTransitionEnd', $.proxy(complete, this))
  .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])

}[/code]函数移除collapse类，添加collapsing类，并将可折叠元素初始高度设为0。那么这两个类有什么区别和作用呢？我们看看collaspe和collapsing的样式表，就什么都明白了。

.collapse {
display: none;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .35s;
-o-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: height, visibility;
-o-transition-property: height, visibility;
transition-property: height, visibility;
}[/code]show过程中，将可折叠元素的高度设为该元素的scrollheight。这里应该注意，为什么是scrollheight呢？因为要返回其完整的高度。collapsing类有一个属性overflow：hidden。通过scrollheight属性，可以准确的获得该元素的实际高度，而不是可见高度。这样，再通过css的transition变换，实现下拉的效果。当css动画结束后，执行conplete函数，将collapsing类更改为collapse in类。如果想了解更多emulateTransitionEnd函数的由来，可以访问alexmaccaw的相关文章。这样，通过collapse插件，我们实现了可折叠的菜单。
看到这里，可能你还有一个疑问，那就是菜单是如何隐藏的？我们可以看到，可隐藏的菜单的类名是collapse navbar-collapse。collapse的样式只有一行，那就是display：none，默认不显示。而navbar-collapse的样式很重要。代码如下[code]@media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
}也就是说，当屏幕尺寸大于768时，会重写.navbar-collapse.collapse的样式，将display设置为block，这也充分体现了bootstrap的移动优先原则。