Bootstrap 5 でレスポンシブ Navbar サイドバー「ドロワー」を作成するにはどうすればよいですか?

Bootstrap でレスポンシブ ナビゲーション バー サイドバー「ドロワー」を作成しますか?

Bootstrap 5 Beta 3 の使用 (2021 年更新)

Bootstrap が Offcanvas コンポーネントを提供し、より簡単になりました

Bootstrap 4 の使用 (元の回答)

サイドバーに関する考慮事項:

• 応答性
• マルチレベル構造
• 切り替え可能性
• 位置決め (プッシュかオーバーレイ、左または右)
• 固定またはスティッキー動作
アニメーション スタイル

特定の事項に対処する要件:

1.応答性:

正しい列クラスをcol-autoではなくcolに更新します。

2.ナビゲーションバーのスクロール:

固着を防ぐために、ナビゲーションバーからスティッキートップクラスを削除します。

3.スティッキー メニュー ボタン:

メニュー ボタンはサイドバーと整列していないため、スティッキーであってはなりません。

4.背景ディマー:

これはこの回答ではカバーされていません。

拡張機能を備えたサイドバーの例:

このサイドバーの例は、参照リンクのサイドバーとよく似ています。内容:

固定幅
• 小さい画面では自動的に閉じ、広い画面では開きます
• すべての幅で切り替え可能
• レスポンシブ オーバーレイ サイドバー オン小さい画面

追加の CSSフルバージョン:

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

.row.collapse {
    margin-left: -200px;
    left: 0;
    transition: margin-left .15s linear;
}

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

.row.collapsing {
    margin-left: -200px;
    left: -0.05%;
    transition: all .15s linear;
}

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

デモ: https://codeply.com/go/w1AMD1EY3c

以上がBootstrap 5 でレスポンシブ Navbar サイドバー「ドロワー」を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。