デザイン

デザイン

こんな機能まで…⁉知らなきゃ損する、若者の心をつかむ12のハンバーガーメニュー特化型デザインツール!

43,035 views

読了時間 : 約2分6秒

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

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

 

 

 

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 SNSに簡単シェア!

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

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を翻訳・再構成したものです。

おすすめ新着記事

おすすめタグ