728x90
- 탭메뉴라고 부르는 방식입니다. 버튼에 커서를 올렸을 때 밑에 하위 메뉴가 나오는 방법입니다.
- m1은 하나 씩 나오는 것이고 m2는 한번에 나오는 것입니다.
- 코드를 보시죠
M1
- Jquery
$(".nav > ul > li").mouseover(function(){
$(this).find(".submenu").stop().slideDown()
});
$(".nav > ul > li").mouseout(function(){
$(this).find(".submenu").stop().slideUp()
});- 제이쿼리를 사용하는 방법입니다.
- 선택자를 $로 선택해주고 마우스를 올렸을 때와 내렸을 때 실행되는 함수를 만들어 준 뒤 slideDown(); 과 slideUP();을 통해 효과를 넣어 주면 됩니다.
- stop()은 다음 함수가 실행될 조건이 된다면 ( 메뉴가 다 내려가기 전에 마우스를 내렸다면) 중간에 멈추고 다음 함수가 바로 실행되게 하는 것입니다.
- 여기서 this는 내가 올리고 있는 하나의 li안에 있는 리스트를 뜻합니다.
- Javascript
document.querySelectorAll(".nav > ul > li").forEach(li => {
li.addEventListener("mouseover",(e)=>{
li.querySelectorAll(".submenu").forEach((el)=>{
el.style = "display : block;"
})
})
li.addEventListener("mouseout",(e)=>{
li.querySelectorAll(".submenu").forEach((el)=>{
el.style = "display : none;"
})
})
})- 방식은 비슷합니다.
- 하지만 자바스크립트는 forEach문을 써주어야하고 선택자도 여러개라 querySelectorAll을 써주어야합니다.
M2
- Jquery
$(".nav > ul > li").mouseover(function(){
$(".nav > ul > li").find(".submenu").stop().slideDown()
});
$(".nav > ul > li").mouseout(function(){
$(".nav > ul > li").find(".submenu").stop().slideUp()
});- M1과 크게 다른 점은 없습니다.
- 선택자를 this에서 $(".nav > ul > li")로 바꾸어 주어 li 전체를 선택해 준것이죠
- Javascript
const subMenus = document.querySelectorAll(".nav > ul > li .submenu");
document.querySelectorAll(".nav > ul > li").forEach(li => {
li.addEventListener("mouseover",(e)=>{
subMenus.forEach((el)=>{
el.style.display = "block";
});
});
li.addEventListener("mouseout",(e)=>{
li.addEventListener("mouseout",(e)=>{
subMenus.forEach((el)=>{
el.style.display = "none";
});
});
});
});- 여기는 submenus라는 선택자를 만들어 써주었습니다.
- 그렇게 모든 서브메뉴를 선택해서 한번에 내려가게 해준것이죠
- 끝!