메뉴 오버시 서브메뉴가 다 보이게 js 수정
본문
안녕하세요! js를 잘모르는 퍼블리셔입니다.....
지금 홈페이지에 대메뉴에 오버하면 해당되는 메뉴의 서브메뉴만 나타나는데
대메뉴 오버시 전체 메뉴가 나타나게 코드 수정이 가능할까요..? ㅠㅠ
새해 복 많이 받으세요!
<html>
<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>
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
다음 코드가 도움이 될지 모르겠습니다.
<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>
도움되었습니다!! 감사합니다. js 지우고 주신 코드로 하니 됬어요 !!
감사합니다!!
답변을 작성하시기 전에 로그인 해주세요.
