बूटस्ट्रैप 3 संक्षिप्त करें (बाएं से दाएं)

Question

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

वहाँ एक रास्ता इस मेनू बाएं से दाएं रपट प्राप्त करने के लिए है? मैंने चारों ओर देखा है और बहुत कुछ नहीं देखा है, लेकिन मैं सोच रहा था कि किसी के पास अब अंतर्दृष्टि है या नहीं।

Answer 1

सबसे पहले आप सभी ट्विटर बूटस्ट्रैप सीएसएस के बाद निम्नलिखित सीएसएस परिभाषित:

.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 आधार पर जोड़ने की जरूरत पर आप किस संपत्ति पर एनिमेट करना चाहते हैं।

अंत में, आपको लक्ष्य तत्व की सामग्री को लपेटना होगा और चौड़ाई को एनिमेट करने पर स्पष्ट रूप से इसकी चौड़ाई को परिभाषित करना होगा। ऊंचाई को एनिमेट करने पर यह आवश्यक नहीं है।

Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical

Answer 2

मैं भी इस

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

एचटीएमएल पाया

<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>  

सीएसएस

#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

लक्ष्यीकरण तत्व के ऊपरी बाएँ से इन/टॉगल/स्लाइड एक फीका प्राप्त करने के लिए एक सरल है, लेकिन प्रभावी तरीका है।

प्रदान किया गया समाधान उदाहरण को पूरा करने के लिए बूटस्ट्रैप का उपयोग नहीं करता है, लेकिन आप बूटस्ट्रैप तत्वों के साथ संयोजन में समाधान का उपयोग कर सकते हैं।

जैसे

,

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>

आशा है कि मदद करता है!