浙江 杭州

基于Bootstrap网格系统的可折叠侧边栏特效

系统分类: 网页特效 - jquery插件 - jQuery树形菜单 2017-03-13

人气26272

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


bootstrap-collapsible-sidebar是一款基于Bootstrap网格系统的可折叠侧边栏特效。该特效通过Bootstrap网格系统,少量的CSS和jQuery代码来完成类似侧边栏面板的折叠效果。

使用方法

左侧边栏折叠效果

Bootstrap 3使用12列的响应式网格系统。下面的例子中侧边栏占3列,内容部分占9列。在使用中你需要根据实际情况来完成你的布局。

<div class="container">
    <div class="row" id="row-main">
        <div class="col-md-3" id="sidebar">
            ...
        </div>
        <div class="col-md-9" id="content">
            ...
        </div>
    </div>
</div>              
              

在侧边栏折叠的时候将会发生下面的情况:

  • 侧边栏被隐藏
  • 内容部分占据侧边栏的位置

在这个例子中,内容部分将有9列变为12列。

对于如何隐藏侧边栏,可以通过2种方式来实现:

  • 对于大屏幕设备,使用负的margin(和侧边栏宽度相同)和过渡动画来隐藏它。
  • 对于小屏幕设备,需要做的事情仅仅是在折叠的隐藏侧边栏。
.collapsed {
    display: none; /* hide it for small displays */
}
@media (min-width: 992px) {
    .collapsed {
        display: block;
        margin-left: -25%; /* same width as sidebar */
    }
}                
              

注意上面的媒体查询代码,这里使用min-width: 992px来匹配中等宽度的列(.col-md-)。

由于使用了负的margin-left值,侧边栏会被推到屏幕之外。为了将它隐藏,所有要在容器上设置overflow:hidden;

#row-main {
    overflow-x: hidden; /* necessary to hide collapsed sidebar */
}                
              

最后要处理的事情是侧边栏的动画效果。

#content {
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    transition: width 0.3s ease;
}
#sidebar {
    -webkit-transition: margin 0.3s ease;
    -moz-transition: margin 0.3s ease;
    -o-transition: margin 0.3s ease;
    transition: margin 0.3s ease;
}                
              

当我们需要切换侧边栏的时候,只需要更换是的的class名称即可。

$("#sidebar").toggleClass("collapsed");
$("#content").toggleClass("col-md-12 col-md-9");                
              
右侧边栏折叠效果

又侧边栏折叠效果的制作方法和左侧边栏的基本相同。HTML结构如下:

<div class="container">
    <div class="row" id="row-main">
        <div class="col-md-9" id="content">
            ...
        </div>
        <div class="col-md-3" id="sidebar">
            ...
        </div>
    </div>
</div>                
              

唯一不同的是要使用margin-right属性来隐藏侧边栏。

@media (min-width: 992px) {
    .collapsed {
        display: block;
        margin-right: -25%; /* same width as sidebar */
    }
}                
              

其它具体代码请参考下载文件或demo

查看演示
下载资源:26
下载资源
错误提交:

格式:zip 大小:67.91KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1736.html 非特殊说明,本文版权归原作者所有,转载请注明出处
基于Bootstrap网格系统的可折叠侧边栏特效

我当前G币余额:0 已下载次数:26

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

说点什么...(已有12 评论)

1 2