Bootstrap 3 Thu gọn (từ trái sang phải)

Question

http://getbootstrap.com/javascript/#collapse

Có cách nào để menu này trượt từ trái sang phải không? Tôi đã nhìn xung quanh và không nhìn thấy nhiều, nhưng tôi đã tự hỏi nếu có ai có cái nhìn sâu sắc hơn nữa.

Answer 1

Trước tiên, bạn xác định CSS sau đây sau khi tất cả Twitter Bootstrap 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; 
}  

Tiếp theo, trên tử target (nơi bạn xác định các lớp .collapse), bạn cần phải thêm .width lớp hoặc .height tùy về tài sản bạn muốn tạo hoạt ảnh.

Cuối cùng, bạn phải bọc nội dung của phần tử đích và xác định rõ chiều rộng của nó nếu làm động chiều rộng. Điều này là không cần thiết nếu hoạt hình chiều cao.

Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical

Answer 2

Tôi cũng thấy

http://jc-designs.net/blog/2011/07/how-to-build-a-horizontal-jquery-accordion/

HTML này

<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; 
     }; 
    }); 
}); 

Answer 3

Đây là một cách đơn giản, nhưng hiệu quả để đạt được một fade in/chuyển đổi/trượt từ phía trên bên trái của phần tử nhắm mục tiêu.

Giải pháp được cung cấp không sử dụng Bootstrap để hoàn thành ví dụ, nhưng bạn có thể sử dụng giải pháp kết hợp với các yếu tố Bootstrap.

Chẳng hạn như,

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>

Hy vọng rằng sẽ giúp!