0. 시작

웹 사이트들의 메뉴를 보면 마우스를 올리거나 클릭하면 메뉴가 촤라락 하고 내려오는 메뉴형태를 많이 볼 수 있습니다. 보통 jQuery의 slideDown, slideUp을 많이 이용하는 것 같은데 그 외에도 여러가지 방법을 이용해 구현할 수 있을 것 같아 정리해 보았습니다. 방법은

• Promise
• setInterval
• Transition
• Animation
• jQuery SlideDown, slideUp
  를 이용해 보았습니다.

위와 같은 방법 중에서 jquery 가 제일 심플해서 jquery로 구현하는 것을 정리해 보았습니다.

5. jQuery 이용

html

<div class="menu">
  <span>Menu</span>
  <ul class="sub">
    <li>
      <a href="#None">Home</a>
    </li>
    <li>
      <a href="#None">Profile</a>
    </li>
    <li>
      <a href="#None">Contact</a>
    </li>
  </ul>
</div> 

css

*{
  padding:0;
  margin:0;
}
  
.menu{
  width:300px;
  height:40px;
  text-align:center;
  line-height: 40px;
  background-color:brown;
}

.menu>.sub{
  display:none;
  height:120px;
  list-style:none;
  overflow:hidden;
}

.menu>.sub li{
  background-color:orange;
  border-top:1px white solid;
}

.menu>.sub li>a{
  text-decoration:none;
  color:black;
}

.menu>.sub.up{
  height:0px;
  animation-name:slide_up;
  animation-duration:1s;  
}

.menu>.sub.down{
  height:120px;
  animation-name:slide_down;
  animation-duration:1s;
}

@keyframes slide_up{
  0%{
    height:120px;
  }
  100%{
    height:0px;
  }
}

@keyframes slide_down{
  0%{
    height:0px;
  }
  100%{
    height:120px;
  }
}

js

let subToggle=true;
$(".menu").click(()=>{
  if(subToggle){
    $(".sub").slideDown(1000);
  }else{
    $(".sub").slideUp(1000);
  }
  subToggle=!subToggle;
});

실행하면 슬라이드 드롭다운 메뉴가 구현가능해집니다.

기본적인 sildeDown과 slideUp을 이용하여 구현하였습니다.