メインページ: 方向

メニュー バーは、訪問者が Web サイトで最初に目にするものです。魅力的でクリック可能なリンクを使用して訪問者のエンゲージメントを促進し、メニュー バーを必要に応じてカスタマイズおよび変更できる再利用可能なアイコンに変換して、将来の自分自身に配慮します。 

このセッションでは、次のものを使用してメニュー バーを作成する方法について説明します。

1. メニューバーを統合する
2. メニューバーのスタイルを強化する
3. メニューバーをシンボルに変換する

私たちと一緒にいて 資源を獲得する このチュートリアルでは。 

メニューバーを統合する

私たちは、 メニューメインページの上部にあるr: 

1. アクセス ナビゲーター
2. ロックを解除 パネルを組み込む
3. 案内する コンポーネント
4. ドラッグ メニューバー に ナビゲーター そしてそれを下に配置します 体

‍

の メニューバー コンポーネントには、特定のデフォルトコンポーネントが付属しており、 容器.

前回のメインページのヒーローセクションのチュートリアルでは、独立した 容器 に位置する セクション. 最も高い幅を指定しました 容器 1200 ピクセルに設定され、自動的に「Container」クラスが生成されました。 

「コンテナ」クラスを再利用してみましょう メニューバーの デフォルト 容器 これにより、以前に設定した最大幅 1200 ピクセルの利点も享受できるようになります。 

1. 選択してください メニューバーコンテナ
2. ポップアップ デザインパネル
3. を入力 識別子フィールド
4. 「コンテナ」を選択 現在のクラス

述べる： 要素にクラスを割り当てると、この要素に対して行われたすべてのスタイル変更がこのクラスに保存されます。新しい要素でクラスを再利用して、作成したクラスに保存されているスタイルを自動的に展開できます。 

メニューバーを強化する

背景の色合いを変更してみましょう メニューバー 私たちのデザインとより調和して溶け込むようにするため:

1. を選択 メニューバー
2. 公開 デザインパネル > 背景
3. カラーパレットを起動する
4. 黒を選ぶ

背景の色合いを変える メニューバー 黒の原因は メニューバー 背景と融合して不明瞭になることがあります。ロゴを組み込んだ後、これを修正します。 メニューバー: 

1. 起動する リソースパネル
2. ブランドにロゴをドロップする リンクブロック

ロゴを縮小してみましょう:

1. ロゴを選択 写真
2. コーナーホールドの1つをつかんで196 x 28ピクセルに移動します

パディングを追加して、ロゴを中央に配置し、クリック可能なスペースを広げましょう。

1. ブランドを選択 リンクブロック
2. 公開 デザインパネル > 間隔
3. 上部と下部を組み込む パディング 16ピクセル

述べる： 要素の反対側にマージンやパディングを追加するには、 オプション (Macの場合) または 代替 （Windowsの場合）、そして マージン または パディング 規制当局。 

スタイルを決めましょう メニュー接続 黒い背景に対して目立つようにするため: 

1. 選択してください メニュー接続
2. 拡大する デザインパネル > タイポグラフィ
3. ヒット カラーパレット 色を白に指定します

これらの変更（およびその後の修正）をすべての メニュー接続、すべてのメニューに「メニュー接続」クラスを含めます メニュー接続 の中に メニューバー:

1. 次のものを選択してください メニュー接続 の中に メニューバー
2. を入力 識別子フィールド
3. 「メニュー接続」を選択 現在のクラス
4. 残った1人のためにこれらのステージをやり直す メニュー接続

述べる： 要素に不適切なクラスを使用した場合は、いつでもそのクラスを 識別子フィールドから正しいクラスを選択してください 現在のクラス ドロップダウン。クラスについてさらに詳しく知ることができます。 

認めましょう メニュー接続 余白を調整して、互いの距離を少し広げます。