10+ Hamburger Menu Examples [CSS Only]
記事は上記記事を意訳したものです。
※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。
レスポンシブデザイン、モバイル、あるいはナビゲーション要素にもっと多くのコンテンツを収めたい場合、CSSレスポンシブハンバーガーメニューは最適なソリューションの1つです。
- 1. レスポンシブCSSハンバーガーメニュー – CSSのみ
- 2. シンプルな中央揃えハンバーガーメニュー
- 3. 左からスライドするレスポンシブハンバーガーメニュー
- 4. フルスクリーンハンバーガーメニュー
- 5. ハンバーガーメニューのアニメーション
- 6. キビキビとしたスライディングハンバーガーメニュー
- 7. 左上アニメーションハンバーガーメニュー
- 8. シンプルな左スライディングハンバーガーメニューオーバーレイ
- 9. アニメーションフルスクリーンハンバーガーメニュー
- 10. フルスクリーンモーフィングハンバーガーメニュー
- 11. 多階層ハンバーガーメニュー
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から生成)を使用しています。