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">メニ