レスポンシブ・よくあるヘッダーテンプレをつくる[真下にスッと出る編]

今度は直下にスッと出てスッと消えていくハンバーガーメニューのテンプレを作りました。横から出てくるよりも、正直こっちの方が時間がかかりました。

See the Pen xxbxVYE by ryoko (@ryo0613) on CodePen.

・max-heightを変えてulの出現を制御
・しかしリストのheightは残ってしまうので、overflow:hiddenで制御

最初max-heightではなく、display:noneを使ったのだけれど、
そうしたらtransitionが効かないという壁にぶち当たるまさかのトラップでした…

おすすめ