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

Bootstrap でレスポンシブ Navbar サイドバー「ドロワー」を作成する

Bootstrap 5 では、サイドバーの作成を簡素化する公式 Offcanvas コンポーネントが導入されています。ただし、コンポーネントなしでサイドバーを作成することは可能です。

サイドバー ナビゲーションに関する考慮事項

サイドバー ナビゲーション メニューは、さまざまな課題を引き起こす可能性があります。

• 応答性: サイドバーは画面に基づいて幅、可視性、方向を調整する必要がありますサイズ?
• マルチレベル: ナビゲーション項目にサブレベルを含める必要がありますか?その高さはどのように対応しますか?
• 切り替え: サイドバーを使用できますか?ボタンまたはアイコン?
• 位置: サイドバーはページ コンテンツの横または後ろに配置されますか?
• 配置: サイドバーは左側または右側に表示されますか?サイド?
• スクロール: サイドバーはどのように表示されますか?ページに関連してスクロールしますか?
• アニメーション: サイドバーはスライドするか、折りたたむか、フェードインして表示する必要がありますか?

推奨されるアプローチ

この特定のケースでは、右側の列でcol-autoを使用する代わりに、メニューが表示されているときに幅を埋めるために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">

固定幅の強化されたサイドバー

次の更新されたサイドバーは、提供された例に近く、固定幅、適応動作、および左右にスライドするアニメーションが特徴です:

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

フル機能のサイドバー

この高度なサイドバーには追加の機能が含まれています機能:

• 固定幅
• 適応動作 (画面に基づいて折りたたみまたはオーバーレイ)サイズ)
• 切り替え
• レスポンシブ (小さい画面ではオーバーレイになります)

/* 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 でレスポンシブ Navbar サイドバー「ドロワー」を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。