Bagaimana untuk Mencipta Bar Sisi Navbar Responsif 'Laci' dalam Bootstrap?

Buat Bar Sisi Navbar Responsif "Laci" dalam Bootstrap

Bootstrap 5 memperkenalkan Komponen Offcanvas rasmi yang memudahkan penciptaan bar sisi. Walau bagaimanapun, mencipta bar sisi tanpa komponen masih boleh dilakukan.

Pertimbangan untuk Navs Bar Sisi

Menu navigasi bar sisi boleh menimbulkan pelbagai cabaran:

• Responsif: Sekiranya bar sisi melaraskan lebar, keterlihatan atau orientasinya berdasarkan skrin saiz?
• Berbilang peringkat: Sekiranya item nav termasuk subperingkat, dan bagaimanakah ketinggiannya akan ditampung?
• Menogol: Bolehkah bar sisi togol menggunakan butang atau butang ikon?
• Kedudukan: Sekiranya bar sisi diletakkan di sebelah atau di belakang kandungan halaman?
• Peletakan: Sekiranya bar sisi muncul di sebelah kiri atau kanan sisi?
• Menatal: Bagaimanakah bar sisi seharusnya menatal berhubung dengan halaman?
• Animasi: Patutkah bar sisi meluncur, runtuh atau pudar ke paparan?

Pendekatan Disyorkan

Dalam kes khusus ini , daripada menggunakan col-auto pada lajur kanan, pertimbangkan untuk menggunakan col untuk mengisi lebar apabila menu ada runtuh:

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse width m-0 p-0 h-100 bg-dark">

Bar Sisi Dipertingkat dengan Lebar Tetap

Bar sisi dikemas kini berikut lebih dekat dengan contoh yang anda berikan dan menampilkan lebar tetap, tingkah laku penyesuaian dan animasi slaid-kiri/kanan :

/* Set sidebar width */
.w-sidebar {
    width: 200px;
    max-width: 200px;
}

/* Adjust sidebar on collapsing */
.row.collapse {
    margin-left: -200px;
    left: 0;
    transition: margin-left .15s linear;
}

.row.collapse.show {
    margin-left: 0 !important;
}

/* Adjust sidebar on collapsing */
.row.collapsing {
    margin-left: -200px;
    left: -0.05%;
    transition: all .15s linear;
}

Bar Sisi Berciri Penuh

Ini bar sisi lanjutan termasuk fungsi tambahan:

• Lebar tetap
• Tingkah laku penyesuaian (Rubuh atau tindanan berdasarkan skrin saiz)
• Menogol
• Responsif (Menjadi tindanan pada skrin yang lebih kecil)

/* Optional for overlay sidebar on small screens */
@media (max-width:768px) {

    .row.collapse,
    .row.collapsing {
        margin-left: 0 !important;
        left: 0 !important;
        overflow: visible;
    }
    
    .row > .sidebar.collapse {
        display: flex !important;
        margin-left: -100% !important;
        transition: all .3s linear;
        position: fixed;
        z-index: 1050;
        max-width: 0;
        min-width: 0;
        flex-basis: auto;
    }
    
    .row > .sidebar.collapse.show {
        margin-left: 0 !important;
        width: 100%;
        max-width: 100%;
        min-width: initial;
    }
    
    .row > .sidebar.collapsing {
        display: flex !important;
        margin-left: -10% !important;
        transition: all .2s linear !important;
        position: fixed;
        z-index: 1050;
        min-width: initial;
    }
}

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bar Sisi Navbar Responsif 'Laci' dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!