ハンバーガーメニュー、カンペキ。

何をしているかというと、またもやSlicknavを使ってナビゲーションの作成。

• アンカーリンクとメニュー以外の箇所をクリックしてもメニューを閉じる。

• メニューを閉じた時は開いてるサブメニューも閉じる。

• 開閉アイコンとか色々。

過去に何度か改訂を試みているのだけど、やっとメンテナンスもしやすく満足がいくものができた。

$(document).ready(function() {
    // SlickNav for mobile menu
    $('.pc_menu').slicknav({
        label: '',
        prependTo: '.sp_menu',
        afterClose: function() {
            // サブメニューを初期状態に戻す
            setTimeout(function() {
                resetSubMenus();
            }, 500);  // 500ミリ秒の遅延を追加してメニューが完全に閉じるのを待つ
        }
    });

// Dropdown for desktop
$('.drop li').hover(function() {
    $("ul:not(:animated)", this).slideDown();
}, function() {
    $("ul.sub_menu", this).slideUp();
});

// Toggle active class for SlickNav button
$(".slicknav_btn").click(function() {
    $(this).toggleClass("active");
    if (!$(this).hasClass("active")) {
        // メニューが閉じられたときにサブメニューも初期状態に戻す
        setTimeout(function() {
            resetSubMenus();
        }, 500);  // 500ミリ秒の遅延を追加してメニューが完全に閉じるのを待つ
    }
});

// Close entire menu when a submenu link is clicked
$(".sub_menu a").on("click", function() {
    // For mobile, close the SlickNav menu
    if ($('.slicknav_menu').is(':visible')) {
        $('.slicknav_btn').click();  // Trigger the menu button to toggle
    }
});

// Close the menu when clicking outside of it
$(document).on("click", function(event) {
    // Check if the menu is open
    var isMenuOpen = $('.slicknav_btn').hasClass('active');
    
    // Check if the clicked element is not within the menu
    if (isMenuOpen && !$(event.target).closest('.slicknav_menu, .pc_menu').length) {
        // Close the SlickNav menu
        $('.slicknav_btn').click();

        // サブメニューを初期状態に戻す
        setTimeout(function() {
            resetSubMenus();
        }, 500);  // 500ミリ秒の遅延を追加してメニューが完全に閉じるのを待つ
    }
});

// Reset submenus function
function resetSubMenus() {
    // サブメニューを初期状態に戻す
    $('.slicknav_nav ul').each(function() {
        $(this).addClass('slicknav_hidden').attr('aria-hidden', 'true').hide();
    });
    $('.slicknav_nav li').each(function() {
        $(this).removeClass('slicknav_open').addClass('slicknav_collapsed');
    });
    // デスクトップメニューのサブメニューもリセット
    $('.pc_menu .sub_menu').hide();
    $('.pc_menu .drop li').removeClass('active');
}

// Ensure submenu opens on first click
$('.slicknav_nav .slicknav_parent').off('click').on('click', function(e) {
    var $this = $(this);
    if ($this.hasClass('slicknav_open')) {
        return;
    }
    $this.children('.slicknav_arrow').click();
});

// Toggle SlickNav submenu open state
$('.slicknav_nav .slicknav_parent > a').off('click').on('click', function(e) {
    e.preventDefault();
    var $parent = $(this).parent();
    $parent.toggleClass('slicknav_open');
    $parent.children('.slicknav_arrow').click();
});

});

よろしければスキを m(_ _)m