자바스크립트로 메뉴 fade-in 효과 만들기

2022.05.10 - [WEB] - 자바스크립트로 메뉴 dropdown - slidedown효과 만들기

자바스크립트로 만드는 메뉴 dropdown - slidedown효과

저번 글에 이어서 자바스크립트로 메뉴가 나타나는 효과 중 fade-in를 적용해본다.

 

 

 

0. CSS의 :hover를 이용하여 CSS로만 구현하기

.menu_list .main .sub{
     opacity: 0;
     visibility: hidden;
     transition: all 0.4s;
}
.menu_list .main:hover .sub{
     opacity: 1;
     visibility: visible;
     transition: all 0.4s;
}

자세한 설명은 2-2 참고

 

 

 

1. 제이쿼리로 메뉴를 fade-in, fade-out효과를 넣는 방법

$('#gnb li').mouseenter(function(){
   $('.sub').stop().fadeIn();
});
$('#gnb li').mouseleave(function(){
   $('.sub').stop().fadeOut();
});

제이쿼리를 활용하여 간단하게 만들어 볼 수 있다.

 

 

 

2-1. 자바스크립트를 활용하여 fade-in, fade-out효과 넣기

저번과 동일한 코드를 사용하였다. 복잡해 보이지만 클래스 부여하는 작동밖에 없다.

//메인 메뉴를 선택
const menuhover = document.querySelectorAll('.main__title');
//하위 메뉴를 선택
const subShow = document.querySelectorAll('.sub');
//모든 메인 메뉴에 이벤트 적용
menuhover.forEach(function(item, index){
    item.addEventListener('mouseenter',()=>{
        subShow[index].classList.add('show');
    })
    //메인 메뉴에서 떠날 때
    item.addEventListener('mouseleave',()=>{
        subShow.forEach(function(item,index){
        	//메인 메뉴에서 떠났지만 서브메뉴에 머무를 때
            item.addEventListener('mouseenter',()=>{
                subShow[index].classList.add('show');
            })
            //메인 메뉴에서 떠났고 서브메뉴에 떠날 때
            item.addEventListener('mouseleave',()=>{
                subShow[index].classList.remove('show');
            })
        })
        //서브 메뉴에서 머무르지 않고 메인에서 바로 떠날 때
        if(subShow[index].classList.contains('show')){
            subShow[index].classList.remove('show');
        }
    })
});

 

2-2. CSS에서 opacity 적용하기

참고로 opacity는 투명도로 opacity만 적용하면 흔적이 남는다. 보통 하위 메뉴에는 텍스트가 있으므로 마우스를 갖다 대면 마우스 포인터가 I모양으로 변하거나 a태그로 작성된 경우 포인터의 모양으로 변한다. 만약 그 밑에 클릭해야 하는 요소가 있다면 메뉴와 겹쳐져서 클릭이 되지 않을 것이다.

.menu_list .main .sub{
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s;
}
    .menu_list .main .sub.show{
    opacity: 1;
    visibility: visible;
    transition: all 0.4s;
}

기본적으로 display에 관해서는 transition이 작동되지 않기 때문에 visibility를 이용하였다. visibility는 자리는 유지하되 보이는 속성을 조절할 수 있다.