CSSで簡単に実装できるクールなアニメーションドロワーメニュー10選【上下左右・階層・スライドメニュー・ハンバーガーメニュー】

最近はどのサイトでも導入されているドロワーメニュー、スライドメニュー、ハンバーガーメニュー。
画面サイズが限られているスマートフォン用のサイトでは、特に重宝しますよね。

そこで今回はCSSで簡単に実装出来るカッコいいアニメーションドロワーメニューをご紹介します。
上下左右、階層表示が可能なドロワーメニューです。
ぜひサイト制作の参考にしてみてください。

左から斜めのメニューが開くアニメーションドロワーメニュー(ハンバーガー)

See the Pen
Easy Sliding Menu w/ Animated Button
by Yago Estévez (@yagoestevez)
on CodePen.


左からスムーズにメニューが開くアニメーションドロワーメニュー(ハンバーガー)

See the Pen
Off-screen nav with :focus-within [PURE CSS]
by Dannie Vinther (@dannievinther)
on CodePen.


右からメニューとフォントがスライドインするドロワーメニュー(ハンバーガー)

See the Pen
Slide out / hamburger / club sandwich menu
by Jonno Witts (@jonnowitts)
on CodePen.


左から開くシンプルなドロワーメニュー(ハンバーガー)

See the Pen
Pure CSS side reveal effect
by Antonija Šimić (@tonkec)
on CodePen.


左のメニューが詳細表示されるかっこいいアニメーションドロワーメニュー

See the Pen
transparency
by Brady Hullopeter (@bradyhullopeter)
on CodePen.

右から透過されたメニューが表示されるアニメーションドロワーメニュー(ハンバーガー)

See the Pen
pure css drawer
by Brady Hullopeter (@bradyhullopeter)
on CodePen.

ホバーで右のメニューが表示されるドロワーメニュー

See the Pen
Pure CSS Slide Out Menu
by Max Kurapov (@mkurapov)
on CodePen.

右から開くシンプルな3D風ドロワーメニュー(ハンバーガー)

See the Pen
3D Off-canvas navigation
by iamarend (@iamarend)
on CodePen.

下からスライドするドロワーメニュー(ハンバーガー)

See the Pen
Left slide menu with icon
by Roman (@ramzs)
on CodePen.

左から開く階層表示ドロワーメニュー(ハンバーガー)

See the Pen
Multi level css only push menu
by Shven (@Shven)
on CodePen.