【Bootstrap+Drawer.js】Drawerメニュー内にBootstrapのNavbarメニューを組み込む
表題の通り、Drawer.jsによりスライドインするメニューの中で、Bootstrapのnavbarを使い開閉可能なサブメニューを実装します。 また、Drawer.jsを使うと実機で見たときにスクロールが正しく機能しなくなったので、そのときにとった対応をメモしておきます。 まずはBootstrapのnavbarとDrawer.jsについて簡単に説明します。 はじめに Bootstrap navbarについて Bootstrapのnavbarは開閉式のメニューを作るのに利用します。 公式 : https://getbootstrap.jp/docs/4.2/components/navbar/ メニューの開閉のコントロールをボタンで行っていますが、テキストにすることもできるので「メインメニュー > サブメニュー」のように実装することも可能です。 実装例 [クリックで表示] 上記イメージの実装が以下のようになります。 開閉ボタンにbuttonタグを使用していますが、これは何でもよくてdata-target属性にcollspaceクラスを持つコンテンツのid属性と併せておけばOKです。 <nav class="navbar navbar-light navbar-expand-md p-1"> <div class="navbar-brand sp"></div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu" aria-controls="navmenu" aria-expanded="false" aria-label="Toggle navigation"&g