인프런 커뮤니티 질문&답변
작성한 질문수
14. 네비게이션 - 반응형 상단 네비게이션 <toggle 이후 md 이상 에서 메뉴 사라짐 현상> 간단 대응
작성
·
13
1
md상태에서 모바일 크기로 변경 후 toggle 버튼 클릭 한 후에 사이즈를 다시 md 이상으로 변경하면 메뉴가 사라지는 현상이 있습니다.
디버깅 모드에서 Elements를 보면 style="display: none;" 이 우선 적용이 되어서 발생하는 문제입니다.
아래와 같이 코드를 추가하면 정상적으로 작동이 됩니다.
단지 사이즈가 변경될 때마다 이벤트가 발생하게 되면 퍼포먼스 상에 문제가 있을 것도 같습니다.
// 윈도우 사이즈에 따라서 직접 속성을 수정하는 것으로 했습니다.
$(window).on('resize', function () {
const $menu = $('.menu');
if (window.innerWidth >= 768) {
$menu.removeAttr('style').removeClass('hidden');
}
else {
$menu.addClass('hidden');
}
});답변 2
0
0
안녕하세요, 인프런 AI 인턴입니다. 주주파파님.
현재 질문에서는 반응형 네비게이션 메뉴가 모바일 크기로 변경된 후, 다시 큰 화면(md 이상)으로 변경할 때 메뉴가 사라지는 문제가 발생한다고 하셨습니다. 이는 style 속성에 display: none;이 적용되었기 때문으로 확인되셨고, 이를 해결하기 위해 윈도우의 크기 변화에 따라 직접적으로 스타일을 수정하는 방식을 도입하셨습니다.
말씀하신 코드의 방식은 확실히 문제를 해결할 수 있지만, 매번 resize 이벤트가 발생할 때마다 실행되므로, 퍼포먼스에 영향을 줄 수 있는 단점도 있습니다.
비슷한 문제와 관련된 기존의 해결책을 참고하시려면, 다음의 자료가 도움이 될 수 있습니다.
반응형 이미지 재설정 - 비슷한 반응형 문제 해결
- 이 질문에서는 반응형 이미지 설정 중 변경 후에 스타일 재설정이 필요했던 사례입니다. 스타일 속성의 리셋을 통해 화면 사이즈 변경 시 문제가 발생하지 않도록 조정하는 방법에 대해 안내하고 있습니다.
- 이 질문에서는 반응형 이미지 설정 중 변경 후에 스타일 재설정이 필요했던 사례입니다. 스타일 속성의 리셋을 통해 화면 사이즈 변경 시 문제가 발생하지 않도록 조정하는 방법에 대해 안내하고 있습니다.
PC에서 모바일화면으로 전환 시 GNB 메뉴 문제
-서로 다른 화면 크기로 전환할 때 발생하는 GNB 메뉴 관련 문제를 해결하는 방법을 안내하며, 메뉴 상태의 관리 및 스타일 속성의 중요성을 강조합니다.
주주파파님의 경우, 리사이즈 이벤트에 추가 최적화가 필요하다면, 주기적인 실행을 제한하는 debounce 함수의 도입을 고려할 수 있습니다. debounce는 특정 시간 간격 내에서 여러 번 발생한 이벤트를 한 번만 실행하도록 제한합니다. 이를 통해 성능을 개선할 수 있습니다.
function debounce(func, wait) {
let timeout;
return function() {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, arguments), wait);
};
}
$(window).on('resize', debounce(function () {
const $menu = $('.menu');
if (window.innerWidth >= 768) {
$menu.removeAttr('style').removeClass('hidden');
} else {
$menu.addClass('hidden');
}
}, 100)); // 100ms 후에 실행
위의 코드가 도움이 되길 바랍니다. 추가적인 질문이 있으시다면 계속해서 질문해 주세요. 지식공유자께서 더 많은 정보를 제공해주실 수 있습니다.
제가 제공한 정보가 질문자님의 이해를 돕는 데 도움이 되었기를 바랍니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.