자바스크립트를 사용한 탭메뉴효과 만들기

 

- 탭메뉴라고 부르는 방식입니다. 버튼에 커서를 올렸을 때 밑에 하위 메뉴가 나오는 방법입니다. 

- 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라는 선택자를 만들어 써주었습니다.

- 그렇게 모든 서브메뉴를 선택해서 한번에 내려가게 해준것이죠

- 끝!