FlexBoxでメガメニューを構築します

コアポイント

• FlexBoxは、開発者が冗長CSSやJavaScriptのトリックに依存せずに複雑なUIを作成できるCSSレイアウトモデルです。線形レイアウトモデルを使用して、計算なしでコンテンツを水平方向または垂直に簡単にレイアウトできるようにします。
• FlexBoxを使用して、巨大なナビゲーションメニューを備えたWebサイトを作成できます。このレイアウトモデルにより、シンプルなナビゲーションバー、シングルドロップダウンメニューセグメント、およびシングルドロップダウンメニューセグメントを3列に制限できます。フレックスレイアウトは、コンテナ内の要素に応答し、メディアクエリの必要性を減らします。
このチュートリアルで作成された最終的なメガメニューは、完全には応答性がありません。メインメニューバーは小さな画面に表示されますが、巨大なメニューは使用できず、トップレベルのリンクのみが使用できます。ただし、このチュートリアルは、FlexBoxのパワーとシンプルさの良いデモンストレーションです。
巨大なメニューナビゲーションは、すべてのオプションを表示するのに非常に役立ち、eコマースWebサイトで効果的に使用できます。ただし、そのような機能の使いやすさを考慮し、実装前にそれらの長所と短所を理解することが重要です。

ご存知のように、ブラウザのサポートが増加するにつれて、FlexBoxは最近多くの注目を集めています。開発者は、冗長CSSやJavaScriptのトリックに依存することなく、複雑なUIを構築できます。

FlexBoxは線形レイアウトモデルを使用して、間隔計算なしに水平または垂直にコンテンツをレイアウトできるようにします。フレックスレイアウトは、コンテナ内の要素に応答し、メディアクエリの必要性を減らします。

この記事では、このレイアウトモデルを使用して巨大なナビゲーションメニューを構築します。その過程で、FlexBoxを使用してUIコンポーネントを構築および拡張するのがどれほど簡単かがわかります。

ここでは、個々のFlexboxプロパティについて詳しく説明しませんが、これらの機能の実際のアプリケーションに焦点を当てます。 FlexBoxの基本的な紹介については、次のリソースを参照してください。

Guy RoutledgeのFlexBoxチュートリアル

Flexboxの初心者向けは紹介

• FlexBox Complete Guide
何を構築しますか？
私が何を構築するかを示すものを見つけるには、フル画面のCodepenをチェックしてください。

このチュートリアルは、3つの部分に分かれています

ナビゲーションバーの構築：FlexBoxを使用して、架空のeコマースプラットフォーム用のシンプルなナビゲーションバーを構築します

単一のドロップダウンメニューセグメントを構築します

単一のドロップダウンメニューセグメントを3列に制限します

ナビゲーションバーをビルド
ナビゲーションバーのマーキングは簡単です。デモンストレーションのために、すべてを処理するために2つのクラス（Navbarとメニュー）を使用します。ここのCSSは、このチュートリアルに関係のないスタイルを除外します。
Navbarクラスは、ナビゲーションバーを利用可能なスペースに集中させる責任がありますが、FlexBoxを使用するメニュークラスに焦点を当てます。

ナビゲーションアイテムを水平に配置したいです。また、スペースが不十分な場合は、各アイテムの間隔を空け、オンデマンドで絞り込むことを望んでいます。

まず、.menu要素にフレックスフォーマットコンテキストを作成する必要があります。これを使用して実装します。現在、.menu要素のすべての直接の子供（つまり、フレックスコンテナ）がフレックスプロジェクトになります。 display: flex

次に、メニュー項目を等しい幅にしたい。

を追加して、それらを等しい幅で均等に成長させるようにしました。コードは次のとおりです flex: 1

コードを見ると、なぜすべてのフレックスプロジェクトを再利用するのか疑問に思うかもしれません（.navbar .menu li）。

<nav class="navbar">
  <ul class="menu">
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
    </ul>
</nav>

デモでは、メニュー項目の上にホバリングすると、背景色が変わります。 Flexプロジェクトのdisplay: flexプロパティを

に設定しないと、LI要素のみが等しい幅を持ち、その内部コンテンツは等しくなりません（つまり、強調表示された部分はクリック可能ですが、他の部分はクリックできないものもあります。 ）。

displayコンテンツを親要素の幅全体に拡張するために、フレックスプロジェクト自体もフレックスコンテナに変えました。この設定を使用すると、各ネストされた要素を親（flexを使用して）と同じくらい広い要素にして、強調表示された領域全体をクリック可能にすることができます。

あるいは、LI要素をフレックスコンテナに設定せずにこれを達成することもできますが、3つの追加プロパティ（flex: 1、

、

）を使用する必要があり、この状況を避けることを好みます。 display: inline-block width: 100%このデモは、これまでに行われたことを示しています。 box-sizing: border-box

わずか5つのCSS Flexboxプロパティで、ナビゲーションバーの準備ができています。ご覧のとおり、これはきちんとした解決策です。

次のセクションでは、巨大なナビゲーションを構築する方法の一部を紹介します。

単一のドロップダウンメニューセグメントを構築します

以下は、複数のセグメントに拡張される単一のドロップダウンメニューセグメントを構築するために使用されるマークアップです。 Container __Listプロジェクトがコピーされ、追加のセグメントが作成されます。

コンテナはフレックスコンテナであり、各直接子要素（つまり、Container__List）はフレックスプロジェクトです。各container__listには複数のナビゲーションアイテムがあり、それぞれがcontainer_listitemでラップされています。コンテンツをdivに巻き付けましたが、後で戻ってきます。

.navbar .menu {
  display: flex;
  position: relative;
}

.navbar .menu li {
  flex: 1;
  display: flex;
  text-align: center;
}

.navbar .menu a {
  flex: 1;
  justify-content: center;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}

以下はCSSです：

containerer__listで

プロパティを使用したことに注意してくださいが、ナビゲーションバー自体には使用しませんでした。前述のように、スペースが不十分なときにナビゲーションバーのアイテムを包みません。代わりに、利用可能な水平スペースが減少すると、それらは均等に縮小します。

<ul class="container">
  <div class="container__list">
    <div class="container__listItem">
      <div>Televisions</div>
    </div>
  </div>
</ul>

ただし、conterer__listプロジェクトの場合、要件はまったく逆です。リストアイテムにスペースの25％を使用してもらいたいので、各行が最大4つのアイテムを保持します。

flex-wrap

を0に設定します。これは、4未満のアイテムを均等に分散することを防ぐため有用です。 0に設定することにより、プロジェクトにスペースの25％を維持するように強制します。

今、divに包まれたコンテンツはどうですか？コンテンツがあふれないようにしたい状況に対処したいと思います。これは、コンテンツがFlex Child Element（つまり、Container_LESTITEM）の内側に直接ある場合、非常に簡単です。次のコードを使用して、カットテキストを省略記事（ "…"）に置き換えることができます。

<nav class="navbar">
  <ul class="menu">
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
    </ul>
</nav>

ただし、この場合、コンテンツをcontainer_listitemでラップしたDivにコンテンツを配置します。したがって、上記のソリューションは機能しません。記事FlexBoxと切り捨てられたテキストは、ソリューションを提供します。次のコードでは、各宣言ブロックの「更新」コメントの次の行は、この問題を処理する行です。

単一のドロップダウンメニューセグメントを3列に制限します

.navbar .menu {
  display: flex;
  position: relative;
}

.navbar .menu li {
  flex: 1;
  display: flex;
  text-align: center;
}

.navbar .menu a {
  flex: 1;
  justify-content: center;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}

この段階では、ほとんどの作業が完了しました。このセクションの残りの部分では、別のドロップダウンセクションを追加します。これは、3つの列項目に制限を強制します。

前述のように、

containerer__listを2回コピーして、「Appliances」と呼ばれる新しいドロップダウンメニューセグメントに使用します。これはデモンストレーション用です。実用的な例では、JavaScriptまたはバックエンド言語でリストを生成する場合があります。

has-multiクラスを追加して、ユーザーインターフェイスを調整します。このクラスを使用して、いくつかのプロパティをオーバーライドする必要があります。

ここでは、コンテナに3つの部分を表示する必要があるため、

<ul class="container">
  <div class="container__list">
    <div class="container__listItem">
      <div>Televisions</div>
    </div>
  </div>
</ul>

を33.333％に設定しました。私は

のみを変更しましたが、他の2つのプロパティflex-basisとflex-basisは単一のセクションコードから継承されました。これにより、Container__Listが3未満の場合、柔軟性が得られます。リストが2つしかない場合、Container__Listプロジェクトは成長し、それらの間にスペースを割り当てます。つまり、各アイテムは総幅の50％を占めます。 flex-grow flex-shrink .container__listitemは

に設定されていることに注意してください。これにより、Container __Listに列が1つしかないことが保証されています。 50％を使用して、セクションごとに2つの列を許可できます。

flex-basis: 100%巨大なメニューの使いやすさに関するいくつかのメモ

私は、その使いやすさをあまり考えることなく、私の例としてMegaメニューを選択しました。そのような機能を使用する前に、私はその長所と短所について議論するためのいくつかのリソースを提供しました。

私の意見では、Megaメニューナビゲーションはすべてのオプションを表示するのに非常に役立ちます。このナビゲーションスタイルは、電子商取引Webサイトに効果的に使用できます。 Intelのナビゲーションが好きです。

メガメニューの可用性の利点と短所（Megaメニューパート1）

ジャイアントメニューは、ウェブサイトナビゲーションに最適です
巨大なドロップダウンメニュー
• 結論

このチュートリアルの最終的なメガメニューは完全には応答しないことに注意する必要があります。メインメニューバーは小さな画面に表示されますが、巨大なメニューは使用できず、トップレベルのリンクのみが使用できます。このチュートリアルの目的のために、これで十分です。必要に応じて、デモをコピーして改善してください。

巨大なドロップダウンメニューナビゲーションシステムは、FlexBoxのパワーとシンプルさを示す素晴らしい方法であり、このチュートリアルでそれを伝えたことを願っています。ご覧のとおり、FlexBoxはコンテンツの中心に使用されるだけではありません。

さまざまなFlexBoxベースのテクノロジーを使用してMegaメニューシステムを構築する場合は、コメントでお気軽にお知らせください。

更新：このCodepenデモで見つけることができるこれらのメガメニューのレスポンシブなモバイルフレンドリーなバージョンを作成しました。

FLEXBOX（FAQ）

を使用してメガメニューを構築するためのFAQ

FlexBoxでMegaメニューを応答する方法は？

FlexBoxでメガメニューを応答するのは非常に簡単です。メディアクエリを使用して、画面サイズに応じてメニューのレイアウトを調整できます。たとえば、メニューアイテムを小さな画面に垂直に積み重ねて、より大きな画面に水平に表示できます。また、フレックスラッププロパティを使用して、必要に応じてメニュー項目が複数の行にラップできるようにすることもできます。さまざまなデバイスでメニューをテストして、見栄えが良く、すべての画面サイズで機能していることを確認してください。

FlexBoxを使用してマルチレベルのメガメニューを作成できますか？

はい、FlexBoxを使用してマルチレベルのメガメニューを作成できます。フレックスコンテナを互いにネストして、マルチレベルのナビゲーションを作成できます。各レベルは、CSSおよびJavaScriptを使用して表示または非表示にできます。これにより、ナビゲートして理解しやすい複雑なナビゲーション構造を作成できます。

メガフレックスボックスメニューにアニメーションを追加する方法は？

CSSトランジションと変換を使用して、FlexBox Megaメニューにアニメーションを追加できます。たとえば、トランジションを使用して、サブメニューの開閉をスムーズにアニメーション化できます。変換を使用して、メニュー項目の動きをアニメーション化することもできます。ユーザーを混乱させたり気を散らしたりしないように、アニメーションと一貫性を維持することを忘れないでください。

Flexboxメガメニューのアクセシビリティを改善する方法は？

FlexBox Megaメニューのアクセシビリティを改善するには、いくつかのステップが含まれます。まず、メニューがキーボードを介してナビゲーション可能であることを確認してください。これは、ユーザーがタブキーと矢印キーを使用してメニューでナビゲートできることを意味します。第二に、ARIAの役割と属性を使用して、メニューに関する追加情報を支援技術に提供します。第三に、メニューに十分なコントラストがあり、読みやすいことを確認してください。

FlexBoxを使用して粘着性メガメニューを作成できますか？

はい、FlexBoxを使用して粘着性メガメニューを作成できます。 「Position：Sticky」CSSプロパティを使用して、ユーザーがスクロールするときにメニューをページの上部に貼り付けます。これにより、長いページでもメニューが常に表示され、アクセス可能になります。

メガフレックスボックスメニューにアイコンを追加する方法は？

アイコンフォントまたはSVGを使用して、FlexBox Megaメニューにアイコンを追加できます。 Flex属性を使用して、アイコンのサイズと間隔を制御できます。 CSSを使用して、アイコンの色とホバー効果を変更することもできます。

Mega Flexboxメニューに検索バーを追加する方法は？

入力フィールドとボタンを送信するフォームを含むフレックスアイテムを作成することにより、FlexBox Megaメニューに検索バーを追加できます。 Flex属性を使用して、検索バーのサイズと位置を制御できます。 CSSを使用して、メニューの残りの部分に一致する検索バーをスタイリングすることもできます。

メガフレックスボックスメニューにドロップダウンメニューを追加する方法は？

ネストされたフレックスコンテナを作成して、FlexBox Megaメニューにドロップダウンメニューを追加できます。 CSSを使用して、デフォルトでドロップダウンメニューを非表示にして、ユーザーが親メニュー項目を上回ったときにそれらを表示できます。 JavaScriptを使用して、ドロップダウンメニューに追加のインタラクティブ性を追加することもできます。たとえば、ユーザーがドロップダウンメニューの外側をクリックしたときに閉じるなどです。

FlexBoxメガメニューにモバイルメニューのトグルを追加する方法は？

メニューディスプレイを切り替えるボタンを作成して、FlexBox Megaメニューにモバイルメニューのトグルを追加できます。メディアクエリを使用して、大きな画面のトグルを非表示にし、小さな画面に表示できます。 JavaScriptを使用して、ボタンがクリックされたときにメニューの「表示」プロパティを切り替えることもできます。

FlexBox Megaメニューのパフォーマンスを最適化する方法は？

FlexBox Megaメニューのパフォーマンスを最適化するには、いくつかのステップが含まれます。まず、CSSとJavaScriptが収縮して圧縮されてファイルサイズを縮小していることを確認してください。第二に、CSSの遷移と変換をJavaScriptの代わりにアニメーションに使用します。第三に、メディアクエリを使用して、画面のサイズに応じてさまざまなスタイルとスクリプトをロードするため、不要なコードロードの量が減少します。

以上がFlexBoxでメガメニューを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。