Navbar クリック時にメニューを閉じる方法 : Bootstrap 4

Bootstrap 4 の Navbar（ナビゲーションメニュー）は、デフォルトのままだとクリック時にメニューが閉じません。

シングルページなど1つのページ内でリンクする場合は、Navbar クリック時にメニューを閉じたいですよね。

今回の記事では、Dropdown メニュー以外のリンクがクリックされた時に、メニューが閉じるようにする方法を解説します。

Nabvar クリック時にメニューを閉じる

下記の JavaScript を jQuery 読み込みの後ろに追記することで、Nabvar クリック時にメニューを閉じることができます。

<script>
$('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){
    if(this.id != 'navbarDropdown'){
      $('.navbar-collapse').collapse('hide');
    }
});
</script>

2行目：「 .navbar-nav>li>a , .dropdown-menu>a 」は、Navbar のリンクと、ドロップダウンのリンクのクリックイベントを取得しています。

3行目：「 if(this.id != 'navbarDropdown'){ 」は、ドロップダウンメニューの開閉時にメニューが閉じないようにしています。

4行目：「 $('.navbar-collapse').collapse('hide'); 」で、メニューを閉じています。

ハンバーガーメニューがクリックされたときにアイコンを変更する方法

ハンバーガーメニューがクリックされたときに、アイコンを変更する方法も解説します。

button[aria-expanded="true"] > span {
  position: relative;
  display: none;
}

button[aria-expanded="true"]::after {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 28px;
  content: "X";
}

Button 属性の aria-expanded が true の場合はメニューが閉じているとき、false の場合は開いているときです。

今回は単純にメニューが開いたときに「 content: "X" 」で、「 X 」に切り替えています。

Navbar がデフォルトで閉じないのは少し不思議な気もしますが、JavaScript を少し追加することで実装可能です。

また、Bootstrap のハンバーガーメニューのアイコンを変更・調整する方法についても以下の記事で解説しています。アイコンが「ちょっとカッコ悪いな」と感じる方は、ぜひ参考にしてください。
バーガーメニューアイコンを変更・調整する方法 : Bootstrap 4

最後に

本記事では Navbar がクリックされたときに閉じる方法と、ハンバーガーメニューがクリックされたときにアイコンを変更する方法を解説しました。

当サイト『レンタルサーバーナレッジ』では、他にも Bootstrap に関する記事を掲載しております。ぜひご覧ください。
“TECH”の記事一覧