今回は、jquery（javascriptも）やcssを駆使して実装する、ハンバーガーメニューのサンプルをまとめた記事となっています。
webサイトにはもはや必須のUIとなったハンバーガーメニューですが、どうせ実装するならjsなどをフル活用してオシャレに仕上げたくなりませんか？
もう何年もwebデザイナーとして働いている僕も、ハンバーガーメニューを作るときはなんとなくテンションが上がるんですよね。
ハンバーガーメニューって基本1サイトに一つなので、ある種花形といえるデザインパーツの一つだと思ってます。
ですが、実際の現場ではハンバーガーメニューのデザインに拘りたくても時間が満足に取れないことの方が多いんじゃないでしょうか。
そこで今回は、jsを駆使したオシャレなハンガーガーメニューのサンプルを40個用意しました。
レベルが高いものばかり集めたので、是非コピペして使ってみてくださいね。
それでは下記からどうぞ！
【jQueryで簡単】超オシャレなハンバーガーメニューのサンプル40選
クリックするとブワッと展開
クリックするとメニューの背景が円状に広がり、その後全画面にオーバーレイします。
各メニューをホバーした時の下線アニメーションも人気が高いです。
See the Pen Pure CSS Fullscreen Navigation Menu by Brenden Palmer (@brenden) on CodePen.
スライムのような挙動でマウスに追従する
グネグネしたアニメーションが可愛いですね。マウスを近づければ近づけるほど強く吸着するような動きを見せます。
See the Pen SVG Gooey Hover Menu Concept by Michael Leonard (@mikel301292) on CodePen.
svgを使った超絶アニメーション
三本線がユニークなアニメーションと共に様々なアイコンに変化します。
svgとcssのstroke-dasharrayプロパティを使用することで実現できます。
See the Pen Hamburger Menu Animations by Tamino Martinius (@Zaku) on CodePen.
クリックで「MENU」の文字が飛び出す
まさに発想の勝利。見てるだけで楽しくなりますね。
繊細な動きですがなんとcssのみで実装されています。
See the Pen Hamburger Menu Button Interaction by Himalaya Singh (@himalayasingh) on CodePen.
クールなアニメーションと共にクローズボタンへ
ほんのり芸術性を感じさせるアニメーション＆色の変化がイカしてます。
See the Pen Click me! Hamburger menu by Alexandr Izumenko (@Izumenko) on CodePen.
ポップな動きで回転しながらクローズボタンへ
結構珍しいアニメーションですね。クローズボタンの線一本一本にシャドウが入ってるのが可愛いです。
See the Pen Jumping Hamburger Menu Icon by Jack Thomson (@Jackthomsonn) on CodePen.
クリックでオシャレなアニメーション（詰め合わせ①）
全12種のアニメーションが用意されています。どれも派手すぎず、且つ洗練されているので超実践向きです。
是非使ってみてください！
See the Pen CSS Menu Icons by Naoya (@nxworld) on CodePen.
クリックでオシャレなアニメーション（詰め合わせ②）
すぐ上のアニメーションよりも、より繊細なイメージです。
一見地味ですが、見逃してしまうくらいの細かい演出が散りばめられていてとってもオシャレです。
See the Pen Custom Hamburger Menu by Elegant Themes (@elegantthemes) on CodePen.
横から階段上にメニューが出現
メニューが分割して滑らかなアニメーションで次々と出現します。一つ一つのメニューの背景にグラデーションがかかっているのも素敵です。
See the Pen Animated In Navigation Menu by Florin Pop (@FlorinPop17) on CodePen.
土台がぐるっと動くアニメーションがイカす
特に閉じるときに注目して欲しいです。奥行きがあるアニメーションはインパクト抜群。
See the Pen Funky Menu Animation by Jack Thomson (@Jackthomsonn) on CodePen.
クローズボタンへ流麗なアニメーションと共に変化
三本線の真ん中が円に変わる演出は必見です。svgを使用することで意外と簡単に実装が可能です。
See the Pen burger menu animation by claudiu.appstract (@claudiuciumedean) on CodePen.
右下のメニューが回転しながら展開
通常のハンバーガーメニューとは一味違う、ゲームのUIによくあるメニューです。うーん、クールでカッコいいですね。
See the Pen Using Sara Soueidan’s Circulus.svg by Sarah Drasner (@sdras) on CodePen.
クリックでオシャレなアニメーション（詰め合わせ③）
クリックでスピーディなアニメーションを伴って別のアイコンへと変化します。
ちょっと残像が出るのが素敵。
See the Pen SVG Hamburger Menu Icon Animation Collection by Matthew Main (@matthewmain) on CodePen.
クリックでアイコンにフォーカス＋テキストが出現
こちらもハンバーガーメニューではないですが、スタイリッシュなアニメーションです。
アプリのフッターで使えそうですね。
See the Pen Tab Bar Menu Animation by Doğukan Çavuş (@dgknca) on CodePen.
大人気のsvg線画アニメーション
三本線が、蝶々結びのようなアニメーションを伴ってクローズボタンへ。オシャレですね〜
See the Pen Menu Animation by Aaron Iker (@aaroniker) on CodePen.
クローズボタンに変わる時のふらっと感がハイカラ。
回転しながらクローズボタンへ変化しますが、回転の際にちょっとふらつきというか、遊びがある演出が入ります。
さすがにこの動きはcssでは難しく、jsのvelocityというアニメーションプラグインを使用して実現しています。
See the Pen Hamburger menu animation with velocity.js by Filippo (@filippo) on CodePen.
クリックで奥から背景がバタンと出現
奥行きのあるアニメーションがユニークで素敵です。
See the Pen Full screen menu animation by Arden (@aderaaij) on CodePen.
クリックでメニューから波紋が広がる
ふわっと広がる波紋が上品ですね。結構昔からあるアニメーションですが相変わらず人気が高いモーションです。
See the Pen Another menu animation by Alex Bratsos (@slack) on CodePen.
クリックで背景がカーテンのように出現
この記事の中で一番推しのアニメーションです！動きは派手目ですが、決して下品ではなくむしろ華麗な印象に仕上がっています。
See the Pen Toggle Burger Menu Animation by Marian Breitmeyer (@marianbreitmeyer) on CodePen.
クリックすると分割された帯がスルスルっと登場
スマートなアニメーションでかっこいいですね。帯のスタイリッシュな登場の後の各メニューの登場もオシャレ。
See the Pen Striking Splits 🎳 | Full Screen Menu Animation Tutorial @keyframers 2.16.0 by @keyframers (@keyframers) on CodePen.
個性的なハンバーガーメニューが素敵
ハンバーガーメニューのアイコンがなんともユニークです。クリックした後の動きが背景の宇宙とマッチしてますね！
See the Pen NTP Website idea – desktop only by Zarko Rvovic (@nocni_sovac) on CodePen.
クリック後のスタイリッシュな帯のモーションがイカす
段階的に帯が出てくるようなアニメーションは海外のwebサイトでよく見ますね。地味にハンバーガーメニューのアニメーションも凝っています。
See the Pen Hamburger icon & menu animation by Karlo Videk (@karlovidek) on CodePen.
斜めの背景がダイナミックなアニメーションと共に登場
キレのある斜めのアニメーションで、見てるだけでもテンションが上がります。
See the Pen Mobile Menu Animation – CSS by Aleksandar Čugurović (@choogoor) on CodePen.
スタイリッシュさを感じさせる王道アニメーション
クリックすると背景がアニメーションしながら登場した後、メニューが段階的に出現します。
横から背景がスルッと登場してくるアニメーションは、根強い人気があります。
See the Pen Side Menu Animation by Kyle Brumm (@kjbrum) on CodePen.
クリックで紙芝居のように上のレイヤーが捌ける
背景が傾いて画面外に捌けた後、奥からメニューが登場します。独創的ですね！
See the Pen Page Tilt Effect by Marco Fugaro (@marco_fugaro) on CodePen.
クリックでオシャレなアニメーション（詰め合わせ④）
久々の詰め合わせです。
ちょっと細かくて分かりにくいですが、アニメーションの終了間際にガクッとした感じのモーションが添えられています。cssのcubic-bezierで実現できます。
See the Pen Hamburger Icons Animations by Ahmad Emran (@ahmadbassamemran) on CodePen.
三本線からクローズボタンへ流麗なアニメーション
高度なjsを書かなくてもsvgを使用することでこのようなレベルの高いアニメーションが可能となります。
See the Pen Hamburger animation by Aaron Iker (@aaroniker) on CodePen.
ハンバーガーの出来上がり！
もはやハンバーガーメニューではないですね。しかし何故か無性にハンバーガーが食べたくなります。
See the Pen CSS Animated Hamburger Icon by Bryan (@Brydave) on CodePen.
クリックでビックリ！ハンバーガーの中身が知りたくば押すべし
クリックでハンガーバーガーの具材がベロッと現れます。これの何がすごいって画像等を一切使わず全てcssで描かれていること。
See the Pen 3D-ish Hamburger Menu by Jon Kantner (@jkantner) on CodePen.
クリックと共にテキストも華麗に変化
テキストがハンドライティングにアニメーションするのが素敵です。
See the Pen Hamburger menu button w/handwriting effect (GSAP 3) by Craig Roblewsky (@PointC) on CodePen.
普通のボタンっぽいですがクリックしてみると、、？
とっても美味しそうです。ハンバーガーよりはどっちかと言えばsubwayっぽいですね。
See the Pen 3D Explore Menu (Burger) by Aaron Iker (@aaroniker) on CodePen.
もはやただのハンバーガー。
ラストに相応しい、変態js星人が作った超ユニークなアニメーションキット。右上の設定を色々弄るとハンバーガーが粉になったりして楽しいです笑
See the Pen Exploding hamburger – and more by pimskie (@pimskie) on CodePen.
まとめ🍔
いかがでしたか？
今回は、jsやcssをフル活用して実装する、オシャレなハンバーガーメニューを厳選してまとめてみました。
ハンバーガーメニューは一見地味に見えますが、使い方次第でwebサイトのアイデンティティともなる無限の可能性を秘めたUIです。
ぜひ拘って作ってみてくださいね。
それでは今回はここら辺で。
webデザインの勉強で悩んでいませんか？
photoshopを始めとしたwebデザインの勉強、詰まっていませんか？
もし独学で苦戦しているなら、webデザインスクールで体系的に学習した方が挫折しなくて済むかもしれません。
筆者もwebデザインスクールに通ってwebデザイナーになり、今は割と稼げるようになったので、当時のスクールにはとても感謝しています。
今は割とキャンペーンをやっているwebデザインスクールも多いので、あなたに合うスクールが見つかるかもしれません。
興味がある方は以下からどうぞ。
＞＞ガチでおすすめのwebデザインスクールランキング【厳選10校】
