jQueryを使用したハンバーガーメニューのアンカーリンクでの表示切り替え

ハンバーガーメニューは、特にモバイルフレンドリーなウェブサイトにおいて、効果的なナビゲーションツールとして広く採用されています。今回は、jQueryを使ってハンバーガーメニューのアンカーリンクでの表示切り替えを実現する方法を解説します。

ハンバーガーメニューとは

ハンバーガーメニューは、三本線のアイコンで表され、クリックするとナビゲーションメニューが展開するUIコンポーネントです。スクリーンスペースを有効活用し、ユーザーにクリーンなインターフェースを提供します。

jQueryを使用したハンバーガーメニューの実装

基本的なセットアップ

ハンバーガーメニューのアイコン（通常は.hamburgerというクラス名）と、
展開するメニュー（例えば.globalMenuSp）をHTMLに設定します。

HTMLコード

<div class="hamburger">
    <span></span>
    <span></span>
    <span></span>
</div>

<nav class="globalMenuSp">
    <ul>
    <li>
        <a href="">メニュー内容</a>
    </li>
    <li>
        <a href="">メニュー内容</a>
    </li>
    <li>
        <a href="">メニュー内容</a>
    </li>
    </ul>
</nav>

jQueryスクリプトの追加

jQueryを使って、ハンバーガーメニューのアイコンがクリックされた際の動作を制御します。
アイコンにactiveクラスを追加または削除し、メニューの表示状態を切り替えます。

$(function() {
    $('.hamburger').click(function() {
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) {
            $('.globalMenuSp').addClass('active');
        } else {
            $('.globalMenuSp').removeClass('active');
            $('.globalMenuSp a').removeClass('active');
        }
    });
});

アンカーリンクでのメニュー閉じる動作

メニュー内のアンカーリンクがクリックされたときに、メニューを自動的に閉じる機能を追加します。これにより、ユーザーがメニュー項目を選択した後、メニューが自動的に非表示になり、ユーザビリティが向上します。

$('.globalMenuSp a').click(function() {
    $('.hamburger').removeClass('active');
    $('.globalMenuSp').removeClass('active');
});

合わせたコード

$(function() {
    $('.hamburger').click(function() {
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) {
            $('.globalMenuSp').addClass('active');
        } else {
            $('.globalMenuSp').removeClass('active');
            $('.globalMenuSp a').removeClass('active');
        }
    });

    // ハンバーガーメニュー内のリンクがクリックされたとき
    $('.globalMenuSp a').click(function() {
        $('.hamburger').removeClass('active');
        $('.globalMenuSp').removeClass('active');
    });
});

まとめ

jQueryを使用したハンバーガーメニューの実装は、ウェブサイトのナビゲーションをスマートにし、ユーザーエクスペリエンスを向上させます。アンカーリンクでのメニューの自動閉鎖機能は、特にモバイルデバイスでの操作性を考慮した場合、非常に便利です。このシンプルで効果的な技術を使って、あなたのウェブサイトもより使いやすく、快適なものにしましょう。

Favorite