햄버거 메뉴 만들기 - Javascript

이주영·2025년 3월 14일
/* Hamburger Menu */
$(function () {
    let hamBtn = $(".ham-menu");
    let navBar = $(".nav-list");
    let navOpen = false;

    // hamBtn 클릭시 navList 열고 닫기기
    hamBtn.click(function () {
        if (!navOpen) {
            $(this).addClass('active');
            navBar.addClass('active-btn');
        } else {
            $(this).removeClass('active');
            navBar.removeClass('active-btn');
        }
        navOpen = !navOpen;
    });

    // navList 클릭시 닫기
    navBar.find("li").click(function () {
        hamBtn.toggleClass('active');
        navBar.toggleClass('active-btn');
        navOpen = false;
    });

    // 외부 클릭 시 메뉴 닫기
    $(document).mouseup(function (e) {
        if (!hamBtn.is(e.target) && hamBtn.has(e.target).length === 0 &&
            !navBar.is(e.target) && navBar.has(e.target).length === 0) {
            hamBtn.removeClass('active');
            navBar.removeClass('active-btn');
            navOpen = false;
        }
    });
});
profile
웹퍼블리셔 주영

0개의 댓글