前端页面响应式开发导航

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

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

代码片段 1

<!DOCTYPE html>
<head>
    <title>响应式导航</title>
    <link rel=”stylesheet” href=”//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css”>
    <script src=”//cdn.bootcss.com/jquery/1.11.3/jquery.min.js”></script>
    <script src=”//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
</head>
<body>
    <nav class=”navbar navbar-default”>
        <div class=”container-fluid”>
            <!– Brand and toggle get grouped for better mobile display –>
            <div class=”navbar-header”>
                <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>
                    <span class=”icon-bar”></span>
                    <span class=”icon-bar”></span>
                    <span class=”icon-bar”></span>
                </button>
                <a class=”navbar-brand” href=”#”>Brand</a>
            </div>
            <!– Collect the nav links, forms, and other content for toggling –>
            <div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>
                <ul class=”nav navbar-nav”>
                    <li class=”active”>
                        <a href=”#”>Link
                            <span class=”sr-only”>(current)</span>
                        </a>
                    </li>
                    <li>
                        <a href=”#”>Link</a>
                    </li>
                    <li class=”dropdown”>
                        <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>Dropdown
                            <span class=”caret”></span>
                        </a>
                        <ul class=”dropdown-menu”>
                            <li>
                                <a href=”#”>Action</a>
                            </li>
                            <li>
                                <a href=”#”>Another action</a>
                            </li>
                            <li>
                                <a href=”#”>Something else here</a>
                            </li>
                            <li role=”separator” class=”divider”></li>
                            <li>
                                <a href=”#”>Separated link</a>
                            </li>
                            <li role=”separator” class=”divider”></li>
                            <li>
                                <a href=”#”>One more separated link</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <form class=”navbar-form navbar-left” role=”search”>
                    <div class=”form-group”>
                        <input type=”text” class=”form-control” placeholder=”Search”>
                    </div>
                    <button type=”submit” class=”btn btn-default”>Submit</button>
                </form>
                <ul class=”nav navbar-nav navbar-right”>
                    <li>
                        <a href=”#”>Link</a>
                    </li>
                    <li class=”dropdown”>
                        <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>Dropdown
                            <span class=”caret”></span>
                        </a>
                        <ul class=”dropdown-menu”>
                            <li>
                                <a href=”#”>Action</a>
                            </li>
                            <li>
                                <a href=”#”>Another action</a>
                            </li>
                            <li>
                                <a href=”#”>Something else here</a>
                            </li>
                            <li role=”separator” class=”divider”></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>
<head>
    <title>响应式导航</title>
    <link rel=”stylesheet” href=”//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css”>
    <script src=”//cdn.bootcss.com/jquery/1.11.3/jquery.min.js”></script>
    <script src=”//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
</head>
<body>
    <a role=”button” data-toggle=”collapse” href=”#collapseOne” aria-expanded=”true” aria-controls=”collapseOne”>
        list items
    </a>
    <div id=’collapseOne’ class=’collapse’>
        <ul class=”list-group”>
            <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的移动优先原则。

前端 linux下开发工具|前端完整开发流程视频教学|前端开发需要会unity3d

» 本文来自:前端开发者 » 《前端页面响应式开发导航》
» 本文链接地址:https://www.rokub.com/5022.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!