[Bootstrap4] jQueryなしでハンバーガーメニューを展開

2020-05-31JavaScriptBootstrap4,VanillaJS

Bootstrap4 のナビバーでは、画面が小さくなるとハンバーガーメニューに切り替えるというレスポンシブ対応ができるが、ハンバーガーメニューの開く閉じる動作は jQuery の読み込みが必要となる。
Bootstrap4 の CSS を使いたいが、メニュー開閉以外に jQuery は使わず、そのためだけに jQuery を読み込みたくなかった。ここ数年、脱jQuery が広まっているし、素の JavaScript だけで書いてみた。

ハンバーガーメニュー開閉の動き

Bootstrap4 のハンバーガーメニューを閉じたり開いたりすると、collapse クラスの div に show クラスが追加されたり、削除されたりする。
( navbar-toggler クラスのボタンに collapsed クラスが追加された削除されたり、 aria-expanded が false / true に切り替わるがここは手を加えていない。
aria-* とかは、WAI-ARIA 属性でアクセシビリティを向上させるためのもの。音声リーダーなどに認識されるため、ここを制御しないならつけない方がいいと思われる。)

show クラスはこうなっている。

.collapse.show {
    display: block;
}

開閉する JavaScript コード

JavaScript で、ハンバーガーメニューをクリックしたら、 collapse クラスの div に show クラスを付けたり消したりする。

// when cliclk hamburger menu
document.querySelector('.navbar-toggler').onclick = function() {
    // if menu is opening, close menu
    if(document.getElementById('navbar').classList.contains('show')) {
        document.querySelector('#navbar').classList.remove('show');
    } else {
      document.querySelector('#navbar').classList.add('show');
    }
}

DEMO

See the Pen Bootstrap4 Navbar collapse without jQuery by AgoPeanuts (@AgoPeanuts) on CodePen.