お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

1. 概要

メニュー要素は、メニューリスト内の表示対象項目ごとに、共通のメニュー項目テンプレートを繰り返し表示する複合ナビゲーションバーです。項目は横一列または縦一列に表示できるため、上部のナビゲーションバーとサイドバーのナビゲーションパネルのどちらにも適しています。

メニュー項目をクリックすると、ポータルユーザーはその項目に設定済みのURLへ移動します。このナビゲーション機能は要素に組み込まれているため、別途マッピングやDelugeアクションを設定する必要はありません。各メニュー項目は常に、次の3つの操作状態のいずれかになります。

1. デフォルト - 項目は表示されていますが、フォーカスも選択もされていない状態
2. ホバー - ユーザーが項目にポインターを合わせたときに強調表示される状態
3. アクティブ - 項目のURLがポータルユーザーの現在のページと一致していることを示すため、外観が変化した状態

3つの状態はすべて、［スタイル］ペインで個別にスタイルを設定できます。これにより、メニュー要素で選択状態や操作状態をポータルユーザーにどのように示すかを細かく管理できます。

情報：ヘッダーは、上部のナビゲーションバーとしてあらかじめスタイルが設定されたメニュー要素のプリセットです。内部では同じメニュー要素が使用されており、同じ設定オプションを利用できます。

最適な用途：

1. 複数のページ間を移動するために常設メニューが必要なナビゲーションバー。
   

2. 表示プロパティ

3. スタイルプロパティ

メニュー要素には、個別にスタイルを設定できる2つのレイヤーがあります。

1. コンテナー*リンク*
2. メニュー項目*リンク*

デザイナーで各レイヤーを個別に選択し、スタイルを設定できます。

コンテナーのスタイル：

1. スタックのスタイル *リンク*
2. 配置 *リンク*
3. レイアウト *リンク*
4. 背景 *リンク*
5. 内側の余白 *リンク*
6. 外側の余白 *リンク*
7. 角の丸み *リンク*
8. 枠線 *リンク*
9. 影 *リンク*
10. 不透明度 *リンク*

コンテナーには、このレイヤー固有のプロパティも1つあります。

メニュー項目のスタイル：

メニュー項目は、メニュー要素内にある個別に選択可能なラベルです。各メニュー項目では、［デフォルト］、［ホバー］、［アクティブ］の3つの操作状態ごとにスタイルを設定できます。これらは、［スタイル］ペインの［メニュー項目］セクション上部にある操作状態タブから設定できます。3つの状態すべてで同じプロパティを使用でき、それぞれにまったく異なる外観を設定できます。

1. フォント *リンク*
2. 背景 *リンク*
3. 内側の余白 *リンク*
4. 外側の余白 *リンク*
5. 角の丸み *リンク*
6. 枠線 *リンク*
7. 影 *リンク*
8. 不透明度 *リンク*

4. 実際に試す

メニュー要素を追加し、次の操作を試してみましょう。

1. ［スタックの種類］を［H-Stack］に設定し、メニューをヒーロー要素とともにH-Stack内に配置します。外側のH-Stackの［コンポーネントの配置］を［両端揃え］に設定し、ロゴを左側、ナビゲーションリンクを右側に配置します。
2. デフォルト状態には控えめな文字色、ホバー状態には少し明るい背景、アクティブ状態には目立つ背景色と文字色を設定し、現在のページをひと目で識別できるようにします。
3. ［スタックの種類］を［V-Stack］に切り替え、メニューの幅を固定のpx値に設定して、サイドバーのナビゲーションパネルを作成します。

5. 関連トピック

1. ポータルページの設定と管理 *リンク*