Bootstrap 3 Collapse (von links nach rechts)

Question

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

Gibt es einen Weg, um dieses Menü zu gelangen von links Gleiten nach rechts? Ich habe mich umgesehen und habe nicht viel gesehen, aber ich habe mich gefragt, ob jemand mehr Einblick hatte.

Answer 1

Zuerst definieren Sie die folgende CSS nach allen 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; 
}  

Als nächstes auf dem Zielelement (in dem Sie die .collapse Klasse definieren) Sie müssen die Klasse .width oder .height hinzufügen abhängig auf welcher Eigenschaft Sie animieren möchten.

Schließlich müssen Sie den Inhalt des Zielelements umbrechen und seine Breite explizit definieren, wenn die Breite animiert wird. Dies ist nicht erforderlich, wenn die Höhe animiert wird.

Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical

Answer 2

Ich fand auch dieses

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

Answer 3

Hier ist eine einfache, aber effektive Art und Weise eine Aufblenden/EAU/Folie aus der oberen linken Ecke des Zielelementes zu erreichen.

Die angegebene Lösung verwendet kein Bootstrap, um das Beispiel zu erreichen, aber Sie können die Lösung in Kombination mit Bootstrap-Elementen verwenden.

Wie,

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>

Hoffnung, das hilft!