Kadenceアドバンスド・ナビゲーション・チュートリアル：サブメニューとメガメニューの作り方

ウェブサイトのデザインにおいて、明確なナビゲーションはユーザーエクスペリエンスとコンテンツのコンバージョンを大幅に向上させる。ケイデンス・ブロック 高度なナビゲーションブロック（ナビゲーションアドブロック）では、サイトの明確な、マルチカラムの分類ページ構造に適した強力なナビゲーション構築機能を持っています。この記事では、我々は、サブメニューを紹介しますと メガ メニューの作成方法、スタイルのカスタマイズ方法。

ナビゲーションの作成

使う ケイデンス のアドバンスド・ナビゲーション・ブロックを使って素早くメインメニューを作ることができます。を挿入します。 ナビゲーション (Adv）ブロックの後、既存のナビゲーションを選択するか、新しいナビゲーション構造を作成してビジュアルナビゲーションビルダーに移動することができます。

高度なヘッダーテンプレートを使用している場合、ナビゲーションメニューエリアをクリックするだけで、新しいナビゲーションを選択または作成できます。

ナビゲーションリンクの追加

ナビゲーションビルダーは、リンクを追加する柔軟な方法を提供します。ページ、記事、商品などのコンテンツタイプを選択することができます。タイトルとリンクアドレスはリンクごとに調整でき、並べ替えはドラッグ操作で行います。

また、エディターのツールバーのプラス記号をクリックし、関連情報を入力することで、ナビゲーション・リンク・ブロックを手動で挿入することも可能です。

スタイルの画一化と個別カスタマイズ

ナビゲーションリンクのスタイルは、一律に設定することも、個々のリンクに対して個別に調整することもできます。ナビゲーション・ブロックの詳細設定では、フォント、色、ボーダー、背景などの基本スタイルを設定できます。ナビゲーション・リンク・ブロック自体にもスタイル・オーバーライドがあり、より柔軟なデザイン・ニーズに対応できます。

サブメニューの追加

サブメニューは、メインメニュー項目にドロップダウン階層を追加するために使用されます。2つの作成方法がサポートされています：

• ナビゲーションビルダーで、メインメニュー項目を選択し、"サブメニュー・リンクの追加"

• ナビゲーション・リンク・ブロックのツールバーで、「入れ子」アイコンをクリックし、下位のナビゲーション項目を作成する。

また、リンクブロックを他のメニュー項目の下にドラッグすることで、リスト表示の助けを借りて階層を形成することも可能です。

サブメニューの外観を設定する

サブメニューのスタイルは、グローバル設定と個別設定をサポートしています。背景色、間隔、ボーダー、影などのパラメータを調整し、表示アニメーション（フェード、スライドなど）をカスタマイズできます。サブメニューの説明テキストも、フォント、色、タイポグラフィを含めて個別に設定できます。

メニュー項目間に仕切りを加えることで、視覚的なグループ分けの感覚を向上させることができる。

マルチレベルのナビゲーション構造

サブメニューでは、次のレベルのメニュー項目をネストし続け、3階層以上のナビゲーションシステムを構築する。この構造は、教育、ショッピングモール、ビジネスサービスサイトなど、コンテンツのカテゴリー数が多いサイトに適している。

既存のサブメニュー項目の下にさらにナビゲーションリンクブロックを入れ子にするだけで、複数のレベルのナビゲーションを生成することができます。

メガメニューを使ってリッチコンテンツを表示する

メガ メニューは、商品センターやコラムの概要など、情報量の多いコラムに適しています。グラフィック、アイコン、ボタンなど多様なコンテンツの表示をサポートします。

ナビゲーション・リンク・ブロックが選択され、メガメニュー機能が有効になっている場合、空白スペースから開始するか、プリセットのテンプレートを使用してレイアウトするかを選択できます。任意の ケイデンス カラムレイアウト、ヘッダー、画像、ボタンなどのブロック。

メガメニューの幅は手動でコントロールできます。

あらかじめ設定されたテンプレートを使って素早くレイアウト

ケイデンス 複数提供 メガ コンテンツ構造を組み込んだメニューテンプレート（例：タイプA～G）は、テキストと画像を置き換えるだけで利用できる。

これらのテンプレートは、モールカテゴリー、会社部門、サービスモジュールなどの一般的なページ構成に適しています。

サブメニューとメガメニューの併用

いくつかのメニュー項目がサブメニューを使い、いくつかのメニュー項目が メガ メニューは非常に一般的なレイアウトです。例

• "お飾り「メニューの使い方 メガメニューは複数のグラフィックリンクを表示する

• サービス・サポート」メニューでは、通常のドロップダウンメニューを使用して、連絡先やFAQなどを一覧表示します。

この2つの構造は、ナビゲーションで自由に組み合わせることができ、さまざまなページの要求に柔軟に対応できる。

Kadenceテーマでメガメニューのコンテンツを移行する

以前に ケイデンス 作成された要素 メガ メニューの内容は、新しいアドバンスド・ナビゲーションで使用するためにコピーすることもできます。

入り込む ケイデンス 要素]→[対応するコンテンツを編集]→[リストビューを使用してブロックを完全に選択し、コピーします。アドバンスト・ヘッダー・ナビゲーションに戻り、メガメニューを開くリンク項目を選択し、コピーしたコンテンツを貼り付けて移行を完了する。

概要

ケイデンス アドバンスド・ナビゲーション・ブロックは、単一または複数レベルの構造要件に対応する強力なナビゲーション・オーガナイズを提供します。基本的なドロップダウンナビゲーションであれ、グラフィカルな複数カラムのメガメニューであれ、ビジュアルエディタを使って素早く構築し、柔軟にスタイル設定することができます。