レスポンシブデザインには欠かせない！CSSだけで作るハンバーガーメニュー10+1選

10+ Hamburger Menu Examples [CSS Only]

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

---

レスポンシブデザイン、モバイル、あるいはナビゲーション要素にもっと多くのコンテンツを収めたい場合、CSSレスポンシブハンバーガーメニューは最適なソリューションの1つです。

1. レスポンシブCSSハンバーガーメニュー – CSSのみ

小さなビューポートで標準的な水平メニューの代わりにバーガーメニューを使用するのは一般的です。これにより、メニューは完全にレスポンシブになり、ビューポートのサイズに応じて最適な体験を提供します。

これがお探しのものなら、このサンプルはまさにそれを実現します。しかもCSSだけで。テストするには、CodePenを新しいウィンドウで開き、結果パネルのサイズを変更してください。

レスポンシブモードでは、ハンバーガーメニューは上から縦列に項目を1つずつ開きます。モバイルデバイスでは非常に標準的な動作です。

2. シンプルな中央揃えハンバーガーメニュー

これは非常にシンプルですが効果的です。HTMLとCSSのみを使用して、クールなアニメーションを伴うハンバーガーメニューを実現しています。

ハンバーガーアイコン自体は、クリックするとクロスに変形し、閉じるボタンとして機能します。メニューがスライドして表示され、ナビゲーションリンクが中央に表示されます。

スライディングメニューデザインやクールなアニメーションが好きで、多くのオプションをお探しの場合は、fullPage.jsに興味があるかもしれません。これは、フル幅、フルスクリーンのスクロール可能なウェブページを構築できるライブラリです。ElementorやGutenbergプラグイン、WordPressテーマでも利用可能です。

3. 左からスライドするレスポンシブハンバーガーメニュー

CSSハンバーガーメニューがどのように役立つかをより完全に示す例をお探しの場合、このCodePenはサンプルウェブサイトをレンダリングしてCSSハンバーガーメニューの使用を紹介しています。

純粋なHTMLとCSSのみを使用しているため、何が起こっているかを学び、理解するのが簡単です。メニューアイコンにはアニメーションが施され、メニューが開いているときはクロスに変形します。

メニュー自体は側面からスライドして出てきて、メインウェブサイトに重なります。このデザインはレスポンシブなので、画面幅が小さくなると自動的にヘッダーメニューを隠し、バーガーメニューを利用可能にします。

メニューだけでなくハンバーガー要素にも興味がある場合は、ウェブページに適した素晴らしいサイドメニューの例もチェックしてみてください！

4. フルスクリーンハンバーガーメニュー

メニュー要素をフルスクリーンで開くことを検討していますか？ そんなあなたはこの例を気に入るはずです。バーガーメニューを表示し、フルスクリーンレイヤーで開くCSSのみのソリューションです。

このタイプのフルスクリーンメニューは、メニューに多くの項目、サブメニュー、または追加情報がある場合に便利です。

5. ハンバーガーメニューのアニメーション

ハンバーガーメニューアイコンに異なるアニメーションを探しているなら、これらを見てみる必要があります。

バーガーの状態を設定するために、JavaScript（またはjQuery）の1行だけを使用しています。残りはすべて純粋なCSSです。

6. キビキビとしたスライディングハンバーガーメニュー

HTMLとCSSのみを使用して実現する、非常にキビキビとしたスマートなCSSハンバーガーメニューです。

メニュー自体は左側から素早くスライドして出てきますが、画面全体を占有せず、左側だけを使用します。メニュー項目にはナイスなホバーエフェクトもあります。このエフェクトが十分にファンシーでない場合は、これらのCSSボタンホバーエフェクトからインスピレーションを得て、より良いホバーエフェクトを作成できます。

既存のウェブサイトに追加したい場合や、基本構造だけが必要な場合に適しています。

7. 左上アニメーションハンバーガーメニュー

ほとんどのCSSハンバーガーメニューは左右からスライドするか、画面全体を占有しますが、これは少し異なります。バブル形状のメニュー内の左上隅だけを使用するからです。

従来のハンバーガーメニューデザインと比べてユニークなこの例は、色を変更したり、背景に効果的な影を追加したりするのも簡単です。

これはJavaScriptを使用していますが、非常に最小限です。基本的に、メニューの状態（開閉）を変更するためにCSSクラスを切り替えるだけです。複雑なことは何もありません。ライブラリや依存関係に頼ることなく、非常に基本的な純粋なJavaScriptだけです。

8. シンプルな左スライディングハンバーガーメニューオーバーレイ

アニメーションはスムーズで、安っぽい感じがしません。メニューは左からスライドして出てきて、背後にあるメインコンテンツの上に配置されます。

JavaScriptを必要とせず、HTMLとCSSだけで動作するため、作業や好みに合わせて適応させるのが簡単です。

メニュー自体も編集しやすく、自分のコンテンツを追加するのも簡単です。単に自分のHTML要素を内部に書くだけで、メニューがスライドして出てきます。

ハンバーガーメニューアイコンにも、CSSだけを使用したスムーズな開閉アニメーションがあります。

9. アニメーションフルスクリーンハンバーガーメニュー

円形の背景の中に浮かぶCSSハンバーガーメニューアイコンが特徴で、クリックするとメニューが円形に開くアニメーションを使用します。

アニメーションは非常にスムーズで、メニューアイコン自体から開きます。

フルスクリーンを占有するため、画像、アイコン、テキストを含む多くのスペースを必要とする忙しいナビゲーションメニューに最適です。

これを実現するために純粋なHTMLとCSSのみを使用しています。

10. フルスクリーンモーフィングハンバーガーメニュー

画面の右上隅から外側に形を変えてフルスクリーンメニューになる、楽しいアニメーションCSSハンバーガーメニューです。

HTMLとCSSのみを使用しているため、構造が簡単に理解でき、自分のコンテンツやナビゲーションリンク/スタイルを追加するための編集が容易です。

11. 多階層ハンバーガーメニュー

画面の左側からスライドして出てくるこのメニューデザインは、複雑なナビゲーションに適しています。

素敵なスライディングアニメーションがありますが、メニュー自体は非常によく構造化された項目リストを使用しており、複数の階層に対応できるため、内部カテゴリに便利です。

HTMLとCSS（SCSSから生成）を使用しています。