메뉴 오버시 서브메뉴가 다 보이게 js 수정 채택완료
안녕하세요! js를 잘모르는 퍼블리셔입니다.....
지금 홈페이지에 대메뉴에 오버하면 해당되는 메뉴의 서브메뉴만 나타나는데
대메뉴 오버시 전체 메뉴가 나타나게 코드 수정이 가능할까요..? ㅠㅠ
새해 복 많이 받으세요!
<html>
Copy
<ul class="dropdown">
<li>
대메뉴1
<article>
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
</ul>
</article>
</li>
<li>
대메뉴2
<article>
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
</ul>
</article>
</li>
<li>
대메뉴3
<article>
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
</ul>
</article>
</li>
</ul>
<js>
Copy
document.querySelectorAll(".has-submenu").forEach((el) => {
el.addEventListener("mouseenter", (e) => {
if (window.innerWidth > 1199) {
// 모든 서브메뉴 비활성화
document.querySelectorAll(".has-submenu > article").forEach((sub) => {
sub.classList.remove('active')
});
// 현재 서브메뉴 활성화
el.querySelector("article").classList.add('active')
}
});
el.addEventListener("mouseleave", (e) => {
if (window.innerWidth > 1199) {
el.querySelector(".has-submenu > article").classList.remove('active')
}
});
});답변 1개
채택된 답변
+20 포인트
1년 전
다음 코드가 도움이 될지 모르겠습니다.
Copy
<style>
ul.dropdown {
display: flex;
padding: 0;
background-color: #ddd;
}
ul.dropdown li {
list-style-type: none;
list-style-position: inside;
flex: 1;
padding: 0.4em;
}
ul.dropdown li ul {
display: none;
}
/*
ul.dropdown li:hover ul {
display: inherit;
}
*/
ul.dropdown:has(li:hover) ul {
display: inherit;
}
</style>
<ul class="dropdown">
<li>
대메뉴1
<article>
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
</ul>
</article>
</li>
<li>
대메뉴2
<article>
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
</ul>
</article>
</li>
<li>
대메뉴3
<article>
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
</ul>
</article>
</li>
</ul>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
1년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
감사합니다!!