はじめに
モバイルフレンドリーなウェブサイトでは、一般的にハンバーガーメニューが使用されます。しかし、ユーザーがメニューを開いた後に、ページ内のリンクをクリックした場合、メニューが開いたままだと使い勝手が悪いですよね。そこで、ページ内のリンクをクリックすると自動的にハンバーガーメニューを閉じる方法を紹介します。
実装コード
以下のコードを使用して、ハンバーガーメニュー内のリンクがクリックされたときにメニューを閉じることができます。
JavaScript
$('#hamburger-menu a[href]').on('click', function(event) {
$('.hamburger').trigger('click');
});コードの解説
- セレクタ:
$('#hamburger-menu a[href]')#hamburger-menu内のすべてのリンク（aタグ）を選択します。このセレクタは、ハンバーガーメニュー内のリンク全てに適用されます。
- クリックイベントのバインド:
.on('click', function(event)- 選択されたリンクに対してクリックイベントをバインドします。リンクがクリックされると、指定された関数が実行されます。
- メニューを閉じる:
$('.hamburger').trigger('click');.hamburgerセレクタで選択された要素（通常はハンバーガーメニューのトリガーとなるボタンやアイコン）に対してクリックイベントを発生させます。これにより、ハンバーガーメニューが閉じられます。
実装のポイント
jQueryライブラリの読み込み: このコードはjQueryを使用しているため、事前にjQueryライブラリを読み込んでおく必要があります。以下のようにHTMLの<head>タグ内に追加します。
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
例えば、以下のようなHTMLがあるとします。
HTML
<div class="hamburger">ハンバーガーメニュー</div>
<div id="hamburger-menu">
<a href="#section1">セクション1</a>
<a href="#section2">セクション2</a>
<a href="#section3">セクション3</a>
</div>ハンバーガーメニューを開いている状態で、#section1や#section2、#section3へのリンクをクリックすると、それぞれのセクションへスクロールしますが、同時にハンバーガーメニューも自動的に閉じられます。
このコードでは、$('#hamburger-menu a[href]')でハンバーガーメニュー内のリンクを指定し、そのリンクがクリックされた際に$('.hamburger').trigger('click')が実行されます。これにより、ハンバーガーメニューが閉じられることになります。
まとめ
ハンバーガーメニューを使用したサイトで、ページ内リンクをクリックしたときにメニューを自動的に閉じることで、ユーザー体験を向上させることができます。このシンプルなjQueryスニペットを使って、ぜひ自分のサイトに実装してみてください。
