Hinzufügen eines Dropdown-Menüs zur Navigationskopfzeile in ArcGIS Hub

Zusammenfassung

In einer ArcGIS Hub-Site können der Kopfzeile Navigationsleisten hinzugefügt werden, um die Benutzerfreundlichkeit beim Navigieren auf der Site zu verbessern. Zudem können Dropdown-Menüs hinzugefügt werden, mit denen sich verwandte Links und Abschnitte auf einer Hauptnavigationsleiste gliedern lassen. In diesem Artikel wird der Workflow zum Hinzufügen eines Dropdown-Menüs zur Navigationskopfzeile in einer ArcGIS Hub-Site beschrieben.

Vorgehensweise

1. Öffnen Sie die ArcGIS Hub-Site im Bearbeitungsmodus. Anweisungen finden Sie unter ArcGIS Hub: Öffnen einer Site im Bearbeitungsmodus.
2. Klicken Sie im Site-Editor ggf. auf Umschalter "Anpassen" , um den Seitenbereich zu öffnen.
3. Klicken Sie im Bereich Anpassen auf Kopfzeile.
4. Aktivieren Sie unter Aussehen die Option Benutzerdefiniertes HTML/CSS. Standardmäßig werden der Kopfzeile sieben Navigationsleisten hinzugefügt.

5. Klicken Sie im Abschnitt Benutzerdefiniertes HTML/CSS für HTML auf die Schaltfläche HTML-Code-Editor öffnen .
6. Führen Sie die folgenden Schritte aus, um der Kopfzeile ein Dropdown-Menü hinzuzufügen.
   1. Navigieren Sie im Code-Editor zum Abschnitt <div class="navbar">. Markieren Sie für ein <li>-Tag die gesamte Zeile, und ersetzen Sie die Zeile durch den nachstehenden Code. In diesem Beispiel wird das erste <li>-Tag für "Contact" durch den nachstehenden Code ersetzt.

<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. Wiederholen Sie Schritt 6a, um bei Bedarf weitere Dropdown-Menüs hinzuzufügen.
3. Um den Text der Navigationsleisten und der Dropdown-Menüliste anzupassen, ersetzen Sie den Text zwischen den <a>-Tags durch den gewünschten Text.
4. Um den Navigationsleisten und der Dropdown-Menüliste einen benutzerdefinierten Link hinzuzufügen, müssen Sie das #-Zeichen im href-Attribut der <a>-Tags durch einen Link ersetzen.

5. Klicken Sie auf Übernehmen, um die Änderungen zu speichern. Der Navigationskopfzeile wird ein benutzerdefiniertes Dropdown-Menü hinzugefügt.

7. Klicken Sie im Site-Editor auf Speichern, um die Änderungen zu speichern.
8. Klicken Sie auf den Dropdown-Pfeil neben Speichern und dann auf Entwurf veröffentlichen, um die Live-Site durch den aktuellen Entwurf zu ersetzen.