【CSSのみ】おしゃれなデザインのハンバーガーメニュー13選【コピペOK】

今回は、cssのみでなんともおしゃれに動くハンバーガーメニューのサンプルを紹介する記事となっています🍔

そういっても決して言い過ぎではないくらい、ハンバーガーメニューはwebサイトにおける定番のUIの一つですよね。

とはいえ、実装には通常ではjavascript（jQuery）を使用する必要があり、ハンバーガーメニューのコーディングとなると身構えるwebクリエイターの方も多いのではないでしょうか？笑

僕もかれこれ6年ほどweb制作をやっていますが、なんだかんだいつも時間をかけてしまうところでもあるんですよね。

そこで今回は、面倒なjsのコーディングが必要無い、cssのみで作成されたおしゃれなデザインのハンバーガーメニューを厳選して紹介していきます。

本記事で紹介しているものは汎用性が高く、かつデザイン性も満たしているものばかりですので、日頃のweb制作に取り入れやすいですよ。

時間が無い時などは、コピペして使っていただけたら便利なんじゃないかと思います。

それでは下記からどうぞ！

【CSS】おしゃれなデザインのハンバーガーメニュー13選【コピペOK】🍔

クリックでメニューが下に展開するパターン

jqueryでいうslidetoggleのモーションです。
これをcssで再現できるとは驚きですね！

See the Pen Animated Hamburger CSS by Zaid (@themzaid) on CodePen.

クリックで多数のメニューが展開（※下にスクロールしてください）

通常イメージするハンバーガーメニューとはちょっと違いますが、よく見かけるUIですよね。
このタイプのUIもcssのみで出来ちゃいます。

See the Pen Bouncy Actions Menu (CSS Only) by Rafael L. Pereira (@rafarlp) on CodePen.

クリックでサイドからぬるっとメニューが出現

サイドからメニューが出てくるのも定番ですよね。
アイコンがくるっと回るアニメーション付きです。

See the Pen Hidden Side Menu | CSS Only by Joshua Ward (@joshuaward) on CodePen.

おしゃれなアニメーションでクローズボタンに

クリックすると、2段階のアニメーションを伴いクローズボタンに変形します。
このサンプルのように、少しの工夫で洗練されたアニメーションを実現できますね。

See the Pen Single Element Animated Hamburger Menu CSS Only by Josh Fabean (@fabean) on CodePen.

クリックすると上からメニュー②

クリックすると、ウィンドウの上端からメニューが出てきます。

See the Pen Adaptive Hamburger Menu CSS only by Asprind (@Asprind) on CodePen.

クリックするとサイドからメニュー②

クリックするとメニューが左端から出てきて、ウィンドウを覆うパターンです。

See the Pen Burger Menu – CSS Only by Grizhlie (@grizhlie) on CodePen.

超絶技巧なメニューボタン

クリックしてびっくり。これめちゃくちゃ凄いです笑
svgのパスをstroke-dasharrayやstroke-dashoffsetなどのcssプロパティでアニメーションさせることにより実現させています。

See the Pen Humberg Menu’s by Rajan Rajgor (@rajan_r) on CodePen.

クリックすると全画面メニューがオーバーレイ

全面にメニューの背景が展開されるパターンはリッチに見える為、根強い人気があります。

See the Pen Mobile Full Screen Menu, CSS only by Daniel (@deeman) on CodePen.

大人気の全画面タイプ②

オーバーレイタイプその2です。これはモーションがとってもオシャレ！
cssの万能さを感じます。

See the Pen Pure CSS Fullscreen Navigation Menu by Brenden Palmer (@brenden) on CodePen.

クリックすると左側のメニューが展開

テキストだと伝わりづらいですが、wordpressのサイドメニューのアイコンのみorアイコン＋テキストの2つをクリックで切り替えるモーションがcssのみで実装できます。

See the Pen Expandable side menu CSS Only by Simone Bernabè (@simoberny) on CodePen.

ホバーでサイドのメニューが展開

すぐ上で紹介したクリックで動くバージョンのホバー・バージョンです。こっちのパターンもいいですね！

See the Pen Side Sliding Menu CSS by Eduard L. (@EduardL) on CodePen.

クリックで多数のメニューが展開（特殊アニメーション付き）

クリックで複数のメニューが展開しますが、その際に水滴のようなアニメーションが発生します。
優雅な気持ちになれそうなアニメーションでよきですね！

See the Pen Gooey Menu – CSS Only by Matthew Sechrest (@matthewsechrest) on CodePen.

クリックしてアトムを感じよう

こちらはメニューをクリックすると三本線が華麗なアニメーションとともに原子力を表すアイコンに変化。アニメーションが綺麗！

See the Pen Atomic Hamburger Menu CSS by Alex Coven (@alcoven) on CodePen.

まとめ🍔

いかがでしたか？

今回は、cssのみで実装できるおしゃれなハンバーガーメニューを色々と紹介してみました。

実装が簡単なだけでなく、工夫次第でデザイン性もいくらでも高くできるので、是非普段のweb制作に取り入れてみてくださいね。

それでは本日はここら辺で🍔

webデザインの勉強で悩んでいませんか？

コーディングやwebデザインの勉強、詰まっていませんか？

もし独学で苦戦しているなら、webデザインスクールで体系的に学習した方が挫折しなくて済むかもしれません。

今は割とキャンペーンをやっているwebデザインスクールも多いので、あなたに合うスクールが見つかるかもしれません。

興味がある方は以下からどうぞ。
＞＞ガチでおすすめのwebデザインスクールランキング【厳選10校】

doneこの記事を見ているあなたにオススメの本

doneあなたにはこちらの記事もオススメ