ArcGIS Hub のナビゲーション ヘッダーにドロップダウン メニューを追加する

サマリー

ArcGIS Hub サイトでは、ナビゲーション バーをヘッダーに追加して、サイトを操作する際のユーザー エクスペリエンスを向上させることができます。 ドロップダウン メニューを追加して、メイン ナビゲーション バーの関連リンクやセクションを整理することもできます。 この記事では、ArcGIS Hub サイトのナビゲーション ヘッダーにドロップダウン メニューを追加するワークフローを説明します。

手順

1. ArcGIS Hub サイトを編集モードで開きます。 手順については、「ArcGIS Hub: 編集モードでサイトを開く」をご参照ください。
2. サイト エディター ページで、必要に応じて、カスタマイズの切り替え をクリックしてサイド パネルを開きます。
3. カスタマイズ ウィンドウで、ヘッダーをクリックします。
4. 表示設定のカスタム HTML/CSS オプションをオンにします。 デフォルトでは、7 つのナビゲーション バーがヘッダーに追加されます。

5. カスタム HTML/CSS セクションで、HTML の場合は、HTML コードエディターを開く ボタンをクリックします。
6. 次の手順に従って、ドロップダウンメニューをヘッダーに追加します。
   1. コードエディターで、<div class="navbar"> セクションに移動し、<li> タグのいずれかの行全体をハイライト表示して、その行を以下のコードに置き換えます。 この例では、「Contact」の最初の <li> タグが以下のコードに置き換えられます。

<li class="dropdown">
          <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li class="divider" role="separator"></li>
            <li class="dropdown-header">Nav header</li>
            <li>
              <a href="#">Separated link</a>
            </li>
            <li>
              <a href="#">One more separated link</a>
            </li>
          </ul>
        </li>

2. 必要に応じて、手順 6a を繰り返して、ドロップダウン メニューを追加します。
3. ナビゲーション バーとドロップダウン メニュー リストのテキストをカスタマイズするには、<a> タグの間のテキストを目的のテキストに置き換えます。
4. ナビゲーション バーとドロップダウン メニュー リストにカスタム リンクを追加するには、<a> タグの href 属性の # をリンクに置き換えます。

5. 適用をクリックして変更内容を保存します。 カスタマイズされたドロップダウン メニューがナビゲーション ヘッダーに追加されます。

7. サイト エディター ページで、保存をクリックして変更内容を保存します。
8. 保存の横にある下矢印をクリックし、ドラフトの公開をクリックして、ライブ サイトを現在のドラフトに置き換えます。