web前端开发视频传智播客|前端开发面试的js的问题|前端开发还是后端开发有前途
很多网站的导航都是响应式设计的,最常见的就是在小屏幕设备上导航条会产生折叠,这到底是如何做到的呢?今天我们就来说说响应式导航。首先还是摆出一个栗子,看看bootstrap的导航,然后我们再来分析他的实现原理。
代码片段 1
当屏幕尺寸变小时,采用折叠的方式,将很多元素隐藏起来,为小屏幕设备提供了更多的空间。这样的设计还是相当有趣的,可是到底是如何实现的呢?我们来慢慢说。
首先我们来说最重要的一个元素,那就是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
是不是和我们看到的展开式菜单很像了呢。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的移动优先原则。
前端 linux下开发工具|前端完整开发流程视频教学|前端开发需要会unity3d
评论前必须登录!
注册