Meruntuhkan Sidebar dengan Bootstrap

102

Saya baru saja mengunjungi halaman ini http://www.elmastudio.de/ dan bertanya-tanya apakah mungkin membuat runtuhnya sidebar kiri dengan Bootstrap 3.

Kode untuk menutup sidebar dari atas (khusus ponsel):

<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse">
    <span class="sr-only">Sidebar</span>
    <span class="glyphicon glyphicon-check"></span>
</button>

Sidebar sendiri memiliki kelas hidden-xs. Ini dihapus dengan js berikut

$('.sidebar-toggle').click(function(){
     $('#sidebar').removeClass('hidden-xs');            
});

Jika Anda mengklik tombol tersebut, maka sidebar dari atas akan berubah. Sangat menyenangkan melihat sidebar berperilaku seperti situs web di atas. Setiap bantuan dihargai!

Chris Kami
sumber
7
Apakah kita semua setuju bahwa elmastudio.de tidak lagi memiliki sidebar yang runtuh?
Peter V. Mørch
Juga periksa koleksi menu bilah samping bootstrap yang berguna ini designerlib.com/bootstrap-sidebar-menu-templates
Karuppiah RK

Jawaban:

124

Bootstrap 3

Iya itu mungkin. Contoh "di luar kanvas" ini akan membantu Anda memulai.

https://codeply.com/p/esYgHWB2zJ

Pada dasarnya Anda perlu membungkus tata letak di div luar, dan menggunakan kueri media untuk mengalihkan tata letak di layar yang lebih kecil.

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -41.6%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -41.6%;
  }
  .row-offcanvas-right.active {
    right: 41.6%;
  }
  .row-offcanvas-left.active {
    left: 41.6%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 41.6%;
  }
  #sidebar {
    padding-top:0;
  }
}

Juga, ada beberapa contoh sidebar Bootstrap di sini


Bootstrap 4

Buat "laci" bilah sisi navigasi responsif di Bootstrap 4?

Zim
sumber
@Delucia: berfungsi di Chrome di Android. Bootply itu sendiri tidak bekerja dengan benar, tetapi klik tautan "Alihkan ke tampilan render".
Dan Dascalescu
2
berikut adalah template dashboard
shaijut
1
@stom: Itu bersembunyi di versi seluler dan tablet yang menjadi masalah.
fuddin
25

http://getbootstrap.com/examples/offcanvas/

Ini adalah contoh resmi, mungkin lebih baik untuk beberapa orang. Itu ada di bawah bagian contoh Eksperimen mereka, tetapi karena ini resmi, itu harus selalu diperbarui dengan rilis bootstrap saat ini.

Sepertinya mereka telah menambahkan file css di luar kanvas yang digunakan dalam contoh mereka:

http://getbootstrap.com/examples/offcanvas/offcanvas.css

Dan beberapa kode JS:

$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active')
  });
});
Jon
sumber
9

EDIT: Saya telah menambahkan satu opsi lagi untuk sidebar bootstrap.

Sebenarnya ada tiga cara untuk membuat 3 sidebar bootstrap. Saya mencoba untuk menyimpan kode sesederhana mungkin.

Sidebar tetap

Di sini Anda dapat melihat demo dari bilah sisi tetap sederhana yang telah saya kembangkan dengan ketinggian yang sama dengan halaman

Sidebar di kolom

Saya juga telah mengembangkan sidebar kolom yang agak sederhana yang berfungsi di halaman dua atau tiga kolom di dalam wadah. Ini membutuhkan panjang kolom terpanjang. Di sini Anda dapat melihat demo

Dasbor

Jika Anda menggunakan dasbor google bootstrap, Anda dapat menemukan beberapa dasbor yang sesuai, seperti yang ini . Namun, kebanyakan dari mereka membutuhkan banyak pengkodean. Saya telah mengembangkan dasbor yang berfungsi tanpa javascript tambahan (di sebelah javascript bootstrap). Ini demo

Untuk ketiga contoh tersebut tentunya Anda harus menyertakan file jquery, bootstrap css, js dan theme.css.

Slidebar

Jika Anda ingin sidebar bersembunyi saat menekan tombol, ini juga dimungkinkan hanya dengan sedikit javascript. Berikut demo

FabianW
sumber
6

Via Angular: menggunakan ng-classAngular, kita bisa menyembunyikan dan menampilkan side bar.

http://jsfiddle.net/DVE4f/359/

<div class="container" style="width:100%" ng-app ng-controller="AppCtrl">
<div class="row">
    <div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'" id="colPush" >
        Sidebar
    </div>
    <div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'"  id="colMain"  >
        <button  ng-click='toggle()' >Sidebar Toggle</a>
    </div>    
  </div>
</div>

.

function AppCtrl($scope) {
    $scope.showgraphSidebar = false;
    $scope.toggle = function() {
        $scope.showgraphSidebar = !$scope.showgraphSidebar;
    }
}
Razan Paul
sumber
3

Ini tidak disebutkan di doc, tetapi sidebar kiri di Bootstrap 3 dimungkinkan menggunakan metode "Ciutkan".

Seperti yang disebutkan oleh bootstrap.js:

Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }

Artinya, menambahkan kelas "lebar" ke dalam target, akan meluas menurut lebar, bukan tinggi:

http://jsfiddle.net/2316sfbz/2/

erw13n
sumber
Bagaimana Anda melakukannya untuk menyembunyikan menu kiri hanya 80% dan menampilkan tombol kecil untuk meluaskan menu lagi?
Pathros