ハンバーガーメニューをおしゃれにするCSSスニペット9選。アイコンからすぐ実用できるサンプルまで
スタイリッシュなデザインのハンバーガーメニューのCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。
ハンバーガーメニュー（三本線のメニュー）はメニュー表示の定番となっていて実装することも多いと思います。モバイルファーストの時代になり限られたスペースを有効活用するために生まれたデザインです。本記事ではフォームの中でも「ハンバーガーメニュー」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
ハンバーガーメニューアイコンの多彩なデザイン・動作がよく分かるCSSデザイン例。
シンプルな三本線のハンバーガーメニュー。クリック時の多彩なアニメーション。
See the Pen
CSS Menu Icons by Naoya (@nxworld)
on CodePen.
シンプルな三本線のハンバーガーメニューです。しかし、シンプルながらクリック時のアニメーションがスムーズで多彩なものが用意されています。
ハンバーガーメニューはクリックした後に「閉じるボタン」「戻るボタン」に変化するデザインとすることが多いですので、非常に参考になります。
デザインサンプルの宝庫！ハンバーガーメニューのデザインはここから選ぼう
See the Pen
Randomly generated Pure CSS menu icons w/ markup and SCSS by Jamie Coulter (@jcoulterdesign)
on CodePen.
こちらはハンバーガーメニューのデザインサンプルの宝庫です。シンプルですが大量のサンプルが用意されています。この中から選んだサンプルを参考にすれば間違いないでしょう。
ハンバーガーメニューのアイコン自体は奇抜なものよりもシンプルなものの方が分かりやすくて良いです。パッと見てメニューであることが利用者にも分かりやすいからです。
基本的には「3本線」「2本線」「点線」が多いと思いますので、他のコントロールと親和性が高い物を選ぶと良いでしょう。
メニュー部分の実装までよく分かるCSSデザイン例。Pure CSSでも実装できる。
シンプルなハンバーガーメニューの基本的
See the Pen
Responsive Pure CSS Menu Drawer by ryan (@ryemccoy)
on CodePen.
華美なアニメーションは一切ありません。
メニューボタンをクリックすると左側がスライドしてメニューが出てくるだけというシンプルなサンプルです。
Pure CSSで難しい実装はありませんので、基本を理解するのにとても役に立ちます。
左側からカッコ良く現れるメニュー。
See the Pen
Overlay Css menu by Thibault D (@sacsooo)
on CodePen.
こちらも左側からメニューが現れるデザインサンプルです。
下にあった緑色の線が左に移動してメニューに変化するという、シンプルながらカッコイイ動きで美しいです。
画面全体がメニュー画面に変化するタイプのハンバーガーメニュー
See the Pen
PureCSS Menu by Jason Tyler (@jasontyler)
on CodePen.
こちらはメニューボタンのクリックで画面全体がメニュー画面に変化するタイプのデザインサンプルです。
背景色が反転し、メニュー項目がフワっと現れるアニメーションが素敵です。良くあるタイプのハンバーガーメニューデザインなので、非常に参考になると思います。
メニューが画面中央に移動しメニューに変化！
See the Pen
Pure CSS Menu – #13 by Ivan Grozdic (@ig_design)
on CodePen.
右上にあるメニューボタンをクリックすると、メニューの円が画面中央に移動し、画面全体メニューに変化するというアニメーションをするサンプルです。
Pure CSSでもこれだけ表現できるのは凄いですね。
奇抜な見た目・動きが特徴的！スタイリッシュなハンバーガーメニュー。
動きと色使いがスタイリッシュ！Fullscreenメニュー。
See the Pen
Pure CSS menu by Antonija Šimić (@tonkec)
on CodePen.
右と下から2層のメニューが出てくるデザインサンプルです。動き、色使い、デザイン配置で総合的に見て非常にスタイリッシュです。
また、スマホなどの横幅が狭い場合は、右から出るメニュー1層だけになり、使い勝手も考慮されているのが素晴らしい。
本当にハンバーガーになってしまうハンバーガーメニュー。
See the Pen
CSS Menu Burger by Jack Rugile (@jackrugile)
on CodePen.
こちらのサンプルは、ハンバーガーメニューボタンをクリックすると、メニューが本当にハンバーガーになってしまいました！
上から順番に野菜、チーズ、お肉と思われる色付き線が挿入されていきます。
実用性はありませんが、クスっと笑ってしまう面白さ・遊び心があってユニークです。
ツールボックスタイプのメニュー。
See the Pen
Pure CSS menu cutout effect by Zach Saucier (@ZachSaucier)
on CodePen.
こちらは下の＋ボタンをクリックすると、ツールボックスのようにアイコンが飛び出してきます。
普通のメニューではありませんが、アイコンで機能を表現したいときに役に立ちそうなデザインサンプルです。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
