모바일에서 서브메뉴가 항상 열려 있게 하려면 어떻게 해야 하나요?
본문
모바일에서 서브메뉴가
항상 열려 있게 하려면 어떻게 해야 하나요?
감사합니다.
답변 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 기능을 막아 서브메뉴가 유지되도록 함
}
});
답변 감사합니다.
한 수 배워갑니다. (●'◡'●)
답변을 작성하시기 전에 로그인 해주세요.
