ドロップダウンメニュー表示時の効果を実装する（スマートフォンサイトなど）

スマートフォンサイトでは限られたスペースを有効活用するために、画面上にハンバーガーボタンを設置して押下すると、メニューを表示するデザインを良く見ます。私もそのような効果を利用したかったんですが、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伸ばしています）