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

 

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

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

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

 

「Webサイトからお問い合わせが来ない…」とお悩みの方必見!
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

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

関連タグ:

【期間限定プラン】簡単!ホームページセットアッププラン お申し込みは2022年7月29日(金)15:00まで

CPIの最新情報をTwitterでチェックできます!
@cpiadjp
次へ
前へ