http://getbootstrap.com/javascript/#collapse
有没有办法让这个菜单从左向右滑动?我环顾四周并没有看到太多,但我想知道是否有人有更多的洞察力。
http://getbootstrap.com/javascript/#collapse
有没有办法让这个菜单从左向右滑动?我环顾四周并没有看到太多,但我想知道是否有人有更多的洞察力。
首先,在所有 Twitter Bootstrap CSS 之后定义以下 CSS:
.collapse {
height: auto;
width: auto;
}
.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
.collapse.in.width {
width: auto;
}
.collapse.in.height {
height: auto;
}
接下来,在目标元素(定义 .collapse 类的位置)上,您需要添加类 .width 或 .height ,具体取决于您想要动画的属性。
最后,您必须包装目标元素的内容,并在为宽度设置动画时显式定义其宽度。如果为高度设置动画,则不需要这样做。
我也发现了这个
http://jc-designs.net/blog/2011/07/how-to-build-a-horizontal-jquery-accordion/
HTML
<div id="accordion">
<div class="panel">
<div class="pink"></div>
<div class="panelContent p1"> <strong>Section 1 Header</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</div>
</div>
CSS
#accordion {
list-style:none;
margin:30px 0;
padding:0;
height:270px;
width:980px;
margin:0 0 0 11px;
border-top:2px solid #000000;
border-bottom:2px solid #000000;
overflow:hidden;
}
#accordion .panel {
float:left;
display:block;
height:270px;
width:44px;
overflow:hidden;
color:#666666;
text-decoration:none;
font-size:16px;
line-height:1.5em
}
#accordion .panel.active {
width:848px
}
.panelContent {
padding:15px 15px 15px 55px;
height:240px;
width:778px;
}
.pink {
width:42px;
height:270px;
float:left;
background:url(../images/accordionSprite.png) no-repeat 4px 85px #f980a1;
border-right:2px solid #ffffff;
cursor:pointer
}
.last {
border:none
}
jQuery
$(document).ready(function(){
activePanel = $("#accordion div.panel:first");
$(activePanel).addClass('active');
$("#accordion").delegate('.panel', 'click', function(e){
if( ! $(this).is('.active') ){
$(activePanel).animate({width: "44px"}, 300);
$(this).animate({width: "848px"}, 300);
$('#accordion .panel').removeClass('active');
$(this).addClass('active');
activePanel = this;
};
});
});
这是从目标元素的左上角实现淡入/切换/滑动的一种简单但有效的方法。
提供的解决方案不使用 Bootstrap 来完成示例,但您可以将解决方案与 Bootstrap 元素结合使用。
如,
var main = function() {
var slide = $('.targetEle');
var press = $('button');
press.click(function() {
slide.toggle('slow');
});
}
$(document).ready(main);
.targetEle {
display: none;
margin-top: 5px;
border-radius: 5px;
}
nav {
padding: 5px;
background-color: red;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="btn btn-primary" type="button">
Button with target element
</button>
<div class="targetEle">
<nav>
<p>Menu Item</p>
<p>Menu Item</p>
<p>Menu Item</p>
</nav>
</div>
希望有帮助!