bootstrap 5ならスライドインメニューが超簡単に作れる

nogajun
nogajun

bootstrap 5から端からシュッと出てくる物が作れるoffcanvasコンポーネントが追加されました。これを使うとPCではnavbarのメニュー、モバイルではoffcanvasでスライドインするメニューが超簡単に作れます。

この記事が役に立ったらコーヒーをおごろう

下のリンクはBuy me a coffeeという投げ銭システムのリンクです。役に立ったと思ったら、ぜひ投げ銭をお願いします。

解説

仕組みとしては、navbar-togglerのボタンにcollapse navbar-collapseの折りたたみメニューではなくoffcanvasをリンクさせています。そして、navbarのメニューは、offcanvasの中に入れることで表示、非表示を制御しています。

See the Pen slide in menu in bootstrap5 by Jun Nogata (@nogajun) on CodePen.

リスト

<div class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas"
            aria-controls="offcanvas">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">Menu</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link">hoge</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">hoge</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">hoge</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

いろいろ

検索で来たコピペ目当ての人たちはリストより下は読まないと思うので、グチグチ書いておきます。

bootstrapのnavbarで上から出てくるメニューではなく横から出るスライドインメニューを作りたいと思って情報を検索していました。

しかし、アフィリエイト目当てで書いたクソいbootstrap 4のゴミ情報しか引っかからずあきらめてましたが、検索キーワードにゴミをフィルタリングするワードを加えて検索した結果、Stack Overflowの回答の補足に「bootstrap 5からoffcanvasが追加されました」と書いてあることを発見。それで試しに作ったら、あまり苦労することなく作れてしまいました。

とはいえ、ちょっとは苦労したけどね。

offcanvasについての解説は以下のリンクを参照してください。iPhoneにあるような下からニュっと出てくるダイアログとかも作れます。

アフィリエイト目当てのゴミクソブログにおきましては、この情報が役に立ったならアマギフでもなんでもいいので私に送ってください。Buy me a coffeeからコーヒーでもいいよ。

この記事が役に立ったらコーヒーをおごろう

下のリンクはBuy me a coffeeという投げ銭システムのリンクです。役に立ったと思ったら、ぜひ投げ銭をお願いします。