可折叠侧边栏，导航侧边栏左右折叠

4年前 33,897 0

http://www.ui3g.com/code/uicode-1736.html

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

使用方法

左侧边栏折叠效果

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

1
2
3
4
5
6
7
8
9
10
<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（和侧边栏宽度相同）和过渡动画来隐藏它。
  • 对于小屏幕设备，需要做的事情仅仅是在折叠的隐藏侧边栏。
1
2
3
4
5
6
7
8
9
.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;。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
#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名称即可。

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

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

1
2
3
4
5
6
7
8
9
10
<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属性来隐藏侧边栏。

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

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

查看演示

声明：本站内容来源于原创和互联网，尊重作者版权，转载请注明来源网址，欢迎收藏，谢谢！