コハムコハムWebクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。Only]記事は上記記事を意訳したものです。※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。レスポンシブデザイン、モバイル、あるいはナビゲーション要素にもっと多くのコンテンツを収めたい場合、CSSレスポンシブハンバーガーメニューは最適なソリューションの1つです。CodePen.小さなビューポートで標準的な水平メニューの代わりにバーガーメニューを使用するのは一般的です。これにより、メニューは完全にレスポンシブになり、ビューポートのサイズに応じて最適な体験を提供します。これがお探しのものなら、このサンプルはまさにそれを実現します。テストするには、CodePenを新しいウィンドウで開き、結果パネルのサイズを変更してください。レスポンシブモードでは、ハンバーガーメニューは上から縦列に項目を1つずつ開きます。モバイルデバイスでは非常に標準的な動作です。CodePen.これは非常にシンプルですが効果的です。HTMLとCSSのみを使用して、クールなアニメーションを伴うハンバーガーメニューを実現しています。ハンバーガーアイコン自体は、クリックするとクロスに変形し、閉じるボタンとして機能します。メニューがスライドして表示され、ナビゲーションリンクが中央に表示されます。スライディングメニューデザインやクールなアニメーションが好きで、多くのオプションをお探しの場合は、fullPage.jsに興味があるかもしれません。これは、フル幅、フルスクリーンのスクロール可能なウェブページを構築できるライブラリです。ElementorやGutenbergプラグイン、WordPressテーマでも利用可能です。CodePen.CSSハンバーガーメニューがどのように役立つかをより完全に示す例をお探しの場合、このCodePenはサンプルウェブサイトをレンダリングしてCSSハンバーガーメニューの使用を紹介しています。純粋なHTMLとCSSのみを使用しているため、何が起こっているかを学び、理解するのが簡単です。メニューアイコンにはアニメーションが施され、メニューが開いているときはクロスに変形します。メニュー自体は側面からスライドして出てきて、メインウェブサイトに重なります。このデザインはレスポンシブなので、画面幅が小さくなると自動的にヘッダーメニューを隠し、バーガーメニューを利用可能にします。そんなあなたはこの例を気に入るはずです。バーガーメニューを表示し、フルスクリーンレイヤーで開くCSSのみのソリューションです。このタイプのフルスクリーンメニューは、メニューに多くの項目、サブメニュー、または追加情報がある場合に便利です。CodePen.ハンバーガーメニューアイコンに異なるアニメーションを探しているなら、これらを見てみる必要があります。バーガーの状態を設定するために、JavaScript(またはjQuery)の1行だけを使用しています。残りはすべて純粋なCSSです。CodePen.HTMLとCSSのみを使用して実現する、非常にキビキビとしたスマートなCSSハンバーガーメニューです。メニュー自体は左側から素早くスライドして出てきますが、画面全体を占有せず、左側だけを使用します。メニュー項目にはナイスなホバーエフェクトもあります。このエフェクトが十分にファンシーでない場合は、これらのCSSボタンホバーエフェクトからインスピレーションを得て、より良いホバーエフェクトを作成できます。既存のウェブサイトに追加したい場合や、基本構造だけが必要な場合に適しています。CodePen.ほとんどのCSSハンバーガーメニューは左右からスライドするか、画面全体を占有しますが、これは少し異なります。バブル形状のメニュー内の左上隅だけを使用するからです。従来のハンバーガーメニューデザインと比べてユニークなこの例は、色を変更したり、背景に効果的な影を追加したりするのも簡単です。これはJavaScriptを使用していますが、非常に最小限です。基本的に、メニューの状態(開閉)を変更するためにCSSクラスを切り替えるだけです。複雑なことは何もありません。ライブラリや依存関係に頼ることなく、非常に基本的な純粋なJavaScriptだけです。CodePen.アニメーションはスムーズで、安っぽい感じがしません。メニューは左からスライドして出てきて、背後にあるメインコンテンツの上に配置されます。JavaScriptを必要とせず、HTMLとCSSだけで動作するため、作業や好みに合わせて適応させるのが簡単です。メニュー自体も編集しやすく、自分のコンテンツを追加するのも簡単です。自分のHTML要素を内部に書くだけで、メニューがスライドして出てきます。ハンバーガーメニューアイコンにも、CSSだけを使用したスムーズな開閉アニメーションがあります。CodePen.円形の背景の中に浮かぶCSSハンバーガーメニューアイコンが特徴で、クリックするとメニューが円形に開くアニメーションを使用します。アニメーションは非常にスムーズで、メニューアイコン自体から開きます。フルスクリーンを占有するため、画像、アイコン、テキストを含む多くのスペースを必要とする忙しいナビゲーションメニューに最適です。これを実現するために純粋なHTMLとCSSのみを使用しています。CodePen.画面の右上隅から外側に形を変えてフルスクリーンメニューになる、楽しいアニメーションCSSハンバーガーメニューです。HTMLとCSSのみを使用しているため、構造が簡単に理解でき、自分のコンテンツやナビゲーションリンク/スタイルを追加するための編集が容易です。CodePen.画面の左側からスライドして出てくるこのメニューデザインは、複雑なナビゲーションに適しています。素敵なスライディングアニメーションがありますが、メニュー自体は非常によく構造化された項目リストを使用しており、複数の階層に対応できるため、内部カテゴリに便利です。HTMLとCSS(SCSSから生成)を使用しています。記事は上記記事を意訳したものです。記事は上記記事を意訳したものです。記事は上記記事を意...2024-06-21パンくずリストの地味さに別れを。パンくずリストのデザイン例45選パンくずリストのデザインアイデアを45選ご紹介します。10:30Webクリエイターのコハムです。地味な事務職からWeb制作会社に転職してフリーランスになりました。キンクマハムスターと2人暮らし。3©コハム引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。