在 Bootstrap 中創(chuàng)建響應(yīng)式導(dǎo)航欄側(cè)邊欄“抽屜”

Bootstrap 5 引入了官方 Offcanvas 組件，可以簡(jiǎn)化側(cè)邊欄的創(chuàng)建。然而，創(chuàng)建沒有組件的側(cè)邊欄仍然是可能的。

側(cè)邊欄導(dǎo)航的注意事項(xiàng)

側(cè)邊欄導(dǎo)航菜單可能會(huì)帶來各種挑戰(zhàn)：

• 響應(yīng)能力： 側(cè)邊欄是否應(yīng)根據(jù)屏幕調(diào)整其寬度、可見性或方向尺寸？
• 多級(jí)：導(dǎo)航項(xiàng)目是否應(yīng)該包含子級(jí)別，以及如何適應(yīng)它們的高度？
• 切換：側(cè)邊欄可以使用按鈕或圖標(biāo)？
• 定位：側(cè)邊欄應(yīng)該放置在頁(yè)面內(nèi)容旁邊還是后面？
• 放置：側(cè)邊欄應(yīng)該出現(xiàn)在左側(cè)還是右側(cè)side?
• 滾動(dòng)：側(cè)邊欄應(yīng)該如何滾動(dòng)與頁(yè)面的關(guān)系？
• 動(dòng)畫：側(cè)邊欄是否應(yīng)該滑動(dòng)、折疊或淡出視圖？

推薦方法

在此具體情況，不要在右列使用 col-auto，而是考慮在菜單打開時(shí)使用 col 填充寬度折疊：

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

具有固定寬度的增強(qiáng)側(cè)邊欄

以下更新的側(cè)邊欄更接近您提供的示例，并具有固定寬度、自適應(yīng)行為和向左/向右滑動(dòng)的動(dòng)畫:

/* 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;
}

全功能側(cè)邊欄

此高級(jí)側(cè)邊欄包括附加功能功能：

• 固定寬度
• 自適應(yīng)行為（根據(jù)屏幕折疊或覆蓋大小）
• 切換
• 響應(yīng)式（在較小的屏幕上成為覆蓋）

/* 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;
    }
}

以上是如何在 Bootstrap 中創(chuàng)建響應(yīng)式導(dǎo)航欄側(cè)邊欄'抽屜”？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！