CSS3のtransitionで開いたり閉じたりアニメーションするスマホ用のメニューを作ってみた(高さ自動調整機能付き)

bootstrapは仕様上入れれないとか、
諸々の理由上入れたくはないなっていうときがあるんだけど、
メニューをどうしてもbootstrapのようなドロップダウンメニューを実装したいときがある。

jsで実装する方法もあるけど、jsで実装するのはなんとなく面倒だし、
スマホなんだしそもそもCSS3でやった方がすっきりするからいいよねという感じでもある。

ということで今回はCSS3でドロップダウンメニューを実装する方法を書いてみる。

【html】

<a href="#toggle" class="menu"><img src="./img/btn_menu.png"></a>

<ul class="dropdown-menu">
  <li><a href="#1">メニュー1</a></li>
  <li><a href="#2">メニュー2</a></li>
  <li><a href="#3">メニュー3</a></li>
  <li><a href="#4">メニュー4</a></li>
  <li><a href="#5">メニュー5</a></li>
</ul>

【css】

.dropdown-menu{-webkit-transition-duration:1s;background:#000;padding:0;max-height:0;overflow:hidden;}
.dropdown-menu.open{padding:5px 0;max-height:30em;}
.dropdown-menu li{line-height:3em;list-style:none;}
.dropdown-menu li a{display:block;width:100%;height:100%;color:#fff;}

【js】

$('.menu').on({
  click:function(e){
    e.preventDefault();

    var cls = $(".dropdown-menu").attr("class");

    if(cls.match(/open/)){
      $(".dropdown-menu").removeClass("open");
    }
    else{
      $(".dropdown-menu").addClass("open");
    }
  }
});

html、css、jsにこんな感じで書けばよい。
全体的な流れとしては、ulに対してjsでopenを付けたり外したりって感じ。
htmlは普通なので、css・jsの注意点的なものを書いてみたいと思う。

■css
ul自体にtransitionを指定する必要あり(openを取り除いたときにもアニメーションさせたいので)。
またtransitionではheightの%指定は出来ないのと、heightで指定してしまうと高さの自動調整が出来ないので、max-heightをtransitionの対象にする必要あり。
ちなみにoverflowも指定しておかないと閉じてるときにもクリックできちゃうということになるので注意。

■js
単純に.dropdown-menuの中にopenというclassがあるかどうか見て、無かったらopenを付けるだけ。

ということでこんな感じで実装すれば大丈夫。
メニュー数によって高さも変わってしまうけど、max-heightを指定する形であれば自動的に調整されるので便利的な。