드롭다운 메뉴 표시 효과 구현(스마트폰 사이트 등)

스마트폰 사이트에서는 한정된 공간을 효율적으로 활용하기 위해 화면에 햄버거 버튼을 설치한 뒤 버튼을 누르면 메뉴 디자인을 잘 볼 수 있다.나도 그런 효과를 이용하고 싶었지만 OSS의 라이브러리와 jQuery의 플러그인에 쓸모없는 기능이 부착되어 디자인과 이용이 제한되어 스스로 만들었다.

<script type="text/javascript">
  "use strict";
  function move() {
    const view_obj = document.getElementById('smapho_menubar');
    view_obj.style.display = 'block';
    const height_size = view_obj.clientHeight;
    view_obj.style.height = "0px";
    const anime_timer = setInterval(() => {
      if(view_obj.clientHeight < height_size) {
        view_obj.style.height = view_obj.clientHeight + 10 + "px";
      } else {
        clearInterval(anime_timer);
      }
    },10);
  }
</script>

샘플 페이지
샘플 페이지에서는 CSS의 미디어 조회를 통해 화면 크기를 제어하는 디스플레이를 통해 링크를 표시하고, 폭이 640px보다 작으면 스마트폰 메뉴를 확장한다.

미리 메뉴를 만들고 숨기고 버튼을 누르면 메뉴를 세로 0px로 표시한 다음 세로 폭을 조금씩 늘려 애니메이션처럼 보입니다.(상기 예에서 10ms당 10px 증가)