html5折叠式侧边栏，基于Bootstrap⽹格系统的可折叠侧边栏特
效
bootstrap-collapsible-sidebar是⼀款基于Bootstrap⽹格系统的可折叠侧边栏特效。该特效通过Bootstrap⽹格系统，少量的CSS和jQuery代码来完成类似侧边栏⾯板的折叠效果。
使⽤⽅法
左侧边栏折叠效果
Bootstrap 3使⽤12列的响应式⽹格系统。下⾯的例⼦中侧边栏占3列，内容部分占9列。在使⽤中你需要根据实际情况来完成你的布局。
...
...
在侧边栏折叠的时候将会发⽣下⾯的情况：
侧边栏被隐藏
内容部分占据侧边栏的位置
在这个例⼦中，内容部分将有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;
jquery免费特效下载transition: margin 0.3s ease;
}
当我们需要切换侧边栏的时候，只需要更换是的的class名称即可。$("#sidebar").toggleClass("collapsed");
$("#content").toggleClass("col-md-12 col-md-9");
右侧边栏折叠效果
⼜侧边栏折叠效果的制作⽅法和左侧边栏的基本相同。HTML结构如下：...
...
唯⼀不同的是要使⽤margin-right属性来隐藏侧边栏。
@media (min-width: 992px) {
.collapsed {
display: block;
margin-right: -25%; /* same width as sidebar */
}
}
其它具体代码请参考下载⽂件或demo。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。