[Javascript] 슬라이드 효과 | 네비게이션(nav)에 적용하기 - slideUP(), slideDown()

제이쿼리와 자바스크립트를 사용해 메뉴에 마우스를 올렸을때 슬라이드 효과가 되는 네비게이션을 구현해보겠습니다!

1. jQuery 사용하기

HTML

<header id="headerWrap">
  <nav id="gnbWrap">
    <ul class="gnb">
      <li>
        <a href="">menu1</a>
        <div class="sub-wrap">
          <ul>
            <li><a href="">sub-menu1</a></li>
            <li><a href="">sub-menu2</a></li>
            <li><a href="">sub-menu3</a></li>
            <li><a href="">sub-menu4</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="">menu2</a>
        <div class="sub-wrap">
          <ul>
            <li><a href="">sub-menu1</a></li>
            <li><a href="">sub-menu2</a></li>
            <li><a href="">sub-menu3</a></li>
            <li><a href="">sub-menu4</a></li>
          </ul>
        </div>
      </li>
	  <li>
        <a href="">menu3</a>
        <div class="sub-wrap">
          <ul>
            <li><a href="">sub-menu1</a></li>
            <li><a href="">sub-menu2</a></li>
            <li><a href="">sub-menu3</a></li>
            <li><a href="">sub-menu4</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</header>

구조는 이렇게 gnb라는 ul안에 1depth인 li가 3개 있고
그 li안에 ul li 구조를 하나 더 만들어 2depth를 가지는 메뉴 구조도를 만들었습니다.

CSS

저는 reset-css cdn 을 사용해 css를 초기화 시켜줬습니다!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

cdn은 이 사이트에서 가져왔습니다! ⤵
https://www.jsdelivr.com/package/npm/reset-css

* { box-sizing: border-box; }
a { text-decoration: none; }
#headerWrap { position: absolute; width: 100%; height: 110px; background-color: #000; }
#gnbWrap { height: 100%; }
#gnbWrap ul { display: flex; align-items: center; justify-content: space-around; height: 100%; }
#gnbWrap .gnb > li { width: 20%; height: 110px; text-align: center; }
#gnbWrap .gnb > li > a { display: block; font-size: 20px; font-weight: 600; color: #fff; padding: 43px 10px; }
.sub-wrap { display: none; position: absolute; top: 110px; left: 0; width: 100%; background-color: #111; overflow: hidden; }
.sub-wrap > ul { max-width: 900px; width: 100%; margin: 0 auto; }
.sub-wrap > ul > li > a { display: block; padding: 21px 12px; color: #fff; font-size: 18px; font-weight: bold; opacity: .5; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; }
.sub-wrap > ul > li > a:hover { opacity: 1; }

jQuery

<script src="/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
	$(function(){
		$('.gnb > li').on('mouseover', function(){
			$('.sub-wrap').stop().slideUp(200)
            $(this).children('.sub-wrap').stop().slideDown(200)
		});

		$('.gnb > li').on('mouseleave', function(){
			$(this).children('.sub-wrap').stop().slideUp(200)
		});
	});
</script>

제이쿼리 메소드인 슬라이드(slide)효과를 사용했습니다!

✨결과

2. JavaScript 사용

JavaScript

const gnbLi = document.querySelectorAll('.gnb > li');
const subMenu = document.querySelectorAll('.sub-wrap');

for(let i = 0; i < gnbLi.length; i++){
	gnbLi[i].addEventListener('mouseover', function() {
		subMenu[i].classList.add('active');
	});
}

for(let i = 0; i < gnbLi.length; i++){
	gnbLi[i].addEventListener('mouseleave', function() {
		subMenu[i].classList.remove('active')
	});
}

1depth에 mouseover를 하면 sub-wrap에 active라는 클래스가 붙도록 했어요!

그럼 위의 코드에서 css를 조금 수정해볼게요!

CSS

.sub-wrap { opacity: 0; position: absolute; top: 110px; left: 0; width: 100%; background-color: #111; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; height: 0; }
.sub-wrap.active { opacity: 1; height: 60px; }

display를 opacity로 바꿨고, height값을 0을 주고
active가 붙으면 height값을 줘서 슬라이드 효과를 줬어요!
그리고 자연스러워지게 transition도 넣었습니다!

✨결과

짜잔 완성..~🤓

(결과물이 이거랑 비슷한거 같기도..😎)

제이쿼리와 자바스크립트 두 가지 방법으로 슬라이드 효과를 구현해 보았습니다! 끝!