테스트 사이트 - 개발 중인 베타 버전입니다

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

alexseo 8개월 전 조회 1,504

모바일에서 서브메뉴가 

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

감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
glitter0gim
8개월 전

*특정 페이지로 이동해도

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

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

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

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

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

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

 

※ 벙안 ※

*CSS를 이용

*JavaScript 이용

*localStorage를 활용

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

</p>

<p>$(function() {

    var mouse_event = false;

    var oldX = oldY = 0;</p>

<p>    $(document).mousemove(function(e) {

        if(oldX == 0) {

            oldX = e.pageX;

            oldY = e.pageY;

        }</p>

<p>        if(oldX != e.pageX || oldY != e.pageY) {

            mouse_event = true;

        }

    });</p>

<p>    // 주메뉴

    var $gnb = $(".gnb_1dli > a");</p>

<p>    // ? [추가] 서브메뉴 항상 열어두기 (새로고침해도 유지됨)

    if (localStorage.getItem("submenu_open") === "true") {

        $(".gnb_2dul").show();

    } else {

        $(".gnb_2dul").show(); // 기본적으로 서브메뉴를 항상 열어둠

    }</p>

<p>    // ✅ [기존] 마우스 오버 시 메뉴 활성화 유지

    $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());

        }

    });</p>

<p>    // ❌ [삭제] 마우스가 벗어나면 서브메뉴를 닫는 코드 (자동 닫힘 방지)

    // $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; });</p>

<p>    // ? [추가] 마우스 아웃 이벤트를 무력화하여 서브메뉴가 닫히지 않도록 함

    $gnb.mouseout(function(event) {

        event.stopPropagation(); // 이벤트 전파 방지

    });</p>

<p>    $(".gnb_2dli").mouseout(function(event) {

        event.stopPropagation();

    });</p>

<p>    $gnb.focusout(function(event) {

        event.stopPropagation();

    });</p>

<p>    // ❌ [삭제] 기존의 `mouseleave` 이벤트 제거 (마우스 벗어나면 메뉴 숨김 방지)

    // $('#gnb_1dul>li').bind('mouseleave', function() {

    //     submenu_hide();

    // });</p>

<p>    // ? [추가] 사용자가 직접 메뉴를 닫거나 열 수 있도록 토글 기능 추가

    $(".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();

    });</p>

<p>    // ❌ [삭제] 기존의 문서 클릭 시 메뉴 숨기는 기능 제거

    $(document).unbind('click focusin');</p>

<p>    // ❌ [삭제] 기존의 서브메뉴 숨기는 함수 비활성화 (자동 닫힘 방지)

    function submenu_hide() {

        // 기존 hide 기능을 막아 서브메뉴가 유지되도록 함

    }

});</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

a
alexseo
8개월 전
답변 감사합니다.
g
glitter0gim
8개월 전
한 수 배워갑니다. (●'◡'●)

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인