デザイン

デザイン

トレンドのハンバーガーメニューを快適に!12のデザインサンプル【デザイナー必見】

477 views

ハンバーガーメニューは今やウェブでもモバイルでも広く使われています。しかし作り方次第で快適なナビゲーションメニューにもなれば、使いにくく邪魔な存在にもなってしまいます。

今回は美しいハンバーガーメニューの実装例をご紹介します。

 

 

 

1.Slideout.js

美しいデザインとかわいらしいアニメーションを持つメニューです。タッチで起動することができ、ネイティブのスクロールを採用しているおかげで快適です。

ex①

 

 

2.Drawer

CSS3を利用したjQueryプラグインで、シンプルながらも効果的なアニメーションを使っています。

ex②

 

 

3.Pure Drawer

スライドだけでなくズームなど多彩なアニメーションが利用できるドロワーです。

ex③

 

 

4.Shifter

Shifterはアニメーションするハンバーガーメニュー用アイコンです。ウェブでもモバイルアプリでも使えます。

ex④

 

 

5.Sidr

自動的にデバイスの画面サイズに合わせて大きさを変えてくれる便利なハンバーガーメニューです。

ex⑤

 

 

6.Hamburger Menu to Social Sharing Icons

ハンバーガーメニューにはソーシャルメディアの共有アイコンを置くこともできます。普段は隠れていて、メニューをクリックしたときのみ現れます。

ex⑥

 

 

7.Hover Click Slideout Sidebar Navigation

ホバーした時のアニメーションが美しいナビゲーションです。

ex⑦

 

 

8.Slide in Nav Menu with Off-Trigger Area

独特な雰囲気を持つ、クリエイティブなメニューです。どんなプロジェクトにも合わせることができるでしょう。

ex⑧

 

 

9.Hamburger Menu to Fullscreen List Menu

クリックでメニューをフルスクリーン表示することができます。

ex⑨

 

 

10.Multiple Hamburger Menu Animations

通常ハンバーガーメニューのアイコンは3本線ですが、他のデザインを使うこともできます。

ex⑩

 

 

11.Hamburger Menu to X

クリックすることで☓ボタンに変わるメニューアイコンです。

ex⑪

 

 

12.Hamburger Menu Modal Pop Using GSAP

クリックすることでモーダルのポップアップが現れるメニューです。

ex⑫

 

 

 

ハンバーガーメニューはまだまだ多くの可能性を秘めています。用途に合わせてカスタマイズすれば、もっと快適なデザインが作れるでしょう。

 

 

 

 

※本記事は、Demystifying the Hamburger Menu: 20 Hand-Picked Examplesを翻訳・再構成したものです。

関連記事

おすすめ記事