Warning: Undefined array key "mobile_dir" in /home/kagla/new-sir/old/common.php on line 315
모바일에서 서브메뉴가  항상 열려 있게 하려면 어떻게 해야 하나요?

모바일에서 서브메뉴가  항상 열려 있게 하려면 어떻게 해야 하나요?

모바일에서 서브메뉴가  항상 열려 있게 하려면 어떻게 해야 하나요?

QA

모바일에서 서브메뉴가  항상 열려 있게 하려면 어떻게 해야 하나요?

답변 1

본문

모바일에서 서브메뉴가 

항상 열려 있게 하려면 어떻게 해야 하나요?

감사합니다.

이 질문에 댓글 쓰기 :

답변 1

*특정 페이지로 이동해도

  서브메뉴가 닫히지 않고 그대로 남아 있어 접근성이 향상될 수 있군요! (한 수 배움니다.)

  - 보통 display: none → display: block 상태로 강제 유지.

  - CSS의 position: fixed 또는 visibility: visible 설정.

  - JavaScript 또는 jQuery에서 .toggleClass('open') 등을 이용하여 열림 상태 유지.

  - 사용자가 특정 페이지에서 메뉴를 접었다가 다시 열 때도 유지됨.

  - event.preventDefault(); 등을 이용하여 닫히는 기본 이벤트를 차단.

 

※ 벙안 ※

*CSS를 이용

*JavaScript 이용

*localStorage를 활용

>>> 위와 같은 방안이 있으나. 그누보드5 기준 최적은~
/js/jquery.menu.js를 아래 예시를 참고로 수정함이 최선이랍니다.

$(function() {
    var mouse_event = false;
    var oldX = oldY = 0;
    $(document).mousemove(function(e) {
        if(oldX == 0) {
            oldX = e.pageX;
            oldY = e.pageY;
        }
        if(oldX != e.pageX || oldY != e.pageY) {
            mouse_event = true;
        }
    });
    // 주메뉴
    var $gnb = $(".gnb_1dli > a");
    // ? [추가] 서브메뉴 항상 열어두기 (새로고침해도 유지됨)
    if (localStorage.getItem("submenu_open") === "true") {
        $(".gnb_2dul").show();
    } else {
        $(".gnb_2dul").show(); // 기본적으로 서브메뉴를 항상 열어둠
    }
    // ✅ [기존] 마우스 오버 시 메뉴 활성화 유지
    $gnb.mouseover(function() {
        if(mouse_event) {
            $("#hd").addClass("hd_zindex");
            $(".gnb_1dli").removeClass("gnb_1dli_over gnb_1dli_over2 gnb_1dli_on");
            $(this).parent().addClass("gnb_1dli_over gnb_1dli_on");
            menu_rearrange($(this).parent());
        }
    });
    // ❌ [삭제] 마우스가 벗어나면 서브메뉴를 닫는 코드 (자동 닫힘 방지)
    // $gnb.mouseout(function() { hide_menu = true; });
    // $(".gnb_2dli").mouseout(function() { hide_menu = true; });
    // $gnb.focusout(function() { hide_menu = true; });
    // $(".gnb_2da").focusout(function() { hide_menu = true; });
    // ? [추가] 마우스 아웃 이벤트를 무력화하여 서브메뉴가 닫히지 않도록 함
    $gnb.mouseout(function(event) {
        event.stopPropagation(); // 이벤트 전파 방지
    });
    $(".gnb_2dli").mouseout(function(event) {
        event.stopPropagation();
    });
    $gnb.focusout(function(event) {
        event.stopPropagation();
    });
    // ❌ [삭제] 기존의 `mouseleave` 이벤트 제거 (마우스 벗어나면 메뉴 숨김 방지)
    // $('#gnb_1dul>li').bind('mouseleave', function() {
    //     submenu_hide();
    // });
    // ? [추가] 사용자가 직접 메뉴를 닫거나 열 수 있도록 토글 기능 추가
    $(".gnb_1dli > a").on("click", function(event) {
        var $submenu = $(this).siblings(".gnb_2dul");
        if ($submenu.is(":visible")) {
            $submenu.hide();
            localStorage.setItem("submenu_open", "false"); // 닫힘 상태 저장
        } else {
            $submenu.show();
            localStorage.setItem("submenu_open", "true"); // 열린 상태 저장
        }
        event.preventDefault();
    });
    // ❌ [삭제] 기존의 문서 클릭 시 메뉴 숨기는 기능 제거
    $(document).unbind('click focusin');
    // ❌ [삭제] 기존의 서브메뉴 숨기는 함수 비활성화 (자동 닫힘 방지)
    function submenu_hide() {
        // 기존 hide 기능을 막아 서브메뉴가 유지되도록 함
    }
});
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 129,406
© SIRSOFT
현재 페이지 제일 처음으로