Tutorial: Dropdown-Menülink erstellen

Sie können Dropdown-Menüs oder verschachtelte Menüs erstellen und verwenden, um die Verwendung Ihres Developer Portal zu verbessern.

Vorbereitende Schritte

Sie müssen ein Developer Portal aktiviert haben und über Administratorzugriff verfügen, um dieses Lernprogramm ausführen zu können. Im Lernprogramm Portal erstellen wird erläutert, wie Sie das Portal aktivieren, falls Sie dies noch nicht getan haben.

Info zu diesem Tutorial

In diesem Lernprogramm erstellen Sie einen Link für ein Dropdown-Menü im Menü Main navigation .

Hinweis:

Obwohl Drop-Down-Menü-Links im Entwicklerportal erstellt werden können, wird das Drop-Down-Menü standardmäßig nicht erweitert. Um dafür zu sorgen, dass das Dropdown-Menü erweitert wird, müssen Sie das Modul Superfish verwenden.

Dieses Tutorial führt Sie durch die folgenden Schritte:
  1. Fügen Sie Menülinks zum Hauptnavigationsmenü hinzu.
  2. Erweitern Sie das Dropdown-Menü mithilfe des Moduls 'Superfish'.

Die Titelseite Main navigation wird wie folgt angezeigt, bevor die Änderungen vorgenommen werden. Ein Screenshot der ursprünglichen Titelseite

Menülinks zum Hauptnavigationsmenü hinzufügen

  1. Melden Sie sich bei Developer Portal als Administrator an.
  2. Navigieren Sie zu Struktur > Menüs.
  3. Suchen Sie in der Titelliste nach Main navigation. Klicken Sie auf das Pfeilsymbol neben dem Menü Bearbeiten und wählen Sie Link hinzufügen.

    Wählen Sie Link hinzufügen aus der Dropdown-Liste

  4. Führen Sie die folgenden Schritte aus, um einen neuen Menü-Link hinzuzufügen:
    1. In das Feld Menu link title geben Sie APIs ein.
    2. In das Feld Link geben Sie /api ein.
    3. Aktivieren Sie unter Anzeigeeinstellungen das Kontrollkästchen Erweitert anzeigen.
    4. Klicken Sie auf Speichern, um die Änderungen zu speichern.

      Seite zum Hinzufügen eines neuen Menülinks

      Wichtig: Stellen Sie sicher, dass das Kontrollkästchen Ausgeklappt anzeigen aktiviert ist, da dies der übergeordnete Link für die Untermenü-Links ist.
  5. Führen Sie die folgenden Schritte aus, um einen weiteren Menü-Link zum Hauptnavigationsmenü hinzuzufügen:
    1. Klicken Sie auf der Seite Menü bearbeiten Hauptnavigation auf +Link hinzufügen.
    2. In das Feld Menu link title geben Sie API One ein.
    3. In das Feld Link geben Sie /product/10/api/5 ein.
    4. Wählen Sie unter Parent link -- APIs.
    5. Klicken Sie auf Speichern, um die Änderungen zu speichern.

      Seite zum Hinzufügen von API One

  6. Führen Sie die folgenden Schritte aus, um einen weiteren Menü-Link zum Hauptnavigationsmenü hinzuzufügen:
    1. Klicken Sie auf der Seite Menü bearbeiten Hauptnavigation auf +Link hinzufügen.
    2. In das Feld Menu link title geben Sie API Two ein.
    3. In das Feld Link geben Sie /product/10/api/9 ein.
    4. Wählen Sie unter Parent link -- APIs.
    5. Wählen Sie unter Anzeigeeinstellungen im Feld Gewicht die Option 1.
    6. Klicken Sie auf Speichern.

      Seite zum Hinzufügen von API Two

  7. Die Hierarchie der Menülinks sieht nun wie folgt aus:

    Zeigt die Reihenfolge der Menülinks für die Hauptnavigation an

  8. Navigieren Sie zur Homepage. Der APIs Menülink, den Sie dem Hauptnavigationsmenü hinzugefügt haben, wird angezeigt, aber die Untermenülinks werden nicht erweitert, wenn Sie den Mauszeiger darüber bewegen. Hauptmenü mit API-Link

Mit dem Modul "Superfish" dafür sorgen, dass das Dropdown-Menü erweitert wird

Damit das Dropdown-Menü erweitert wird, wenn Sie den Mauszeiger darüber bewegen, müssen Sie das Modul Superfish verwenden und Block Layoutkonfigurieren.

  1. Klicken Sie auf Erweitern.
  2. Geben Sie in das Feld Filter superfish ein und aktivieren Sie das Kontrollkästchen Superfish.
  3. Klicken Sie auf Aktivieren, um das Modul zu aktivieren.

    Zeigt die Seite "Superfisch aktivieren" an

  4. Navigieren Sie zu Struktur > Block-Layout.
  5. Suchen Sie unter " Blockieren" nach " Main menu, klicken Sie auf das Pfeilsymbol neben "Konfigurieren" und wählen Sie "Deaktivieren".

    Zeigt die Seite zum Deaktivieren des Hauptmenüs an

  6. Klicken Sie auf Block platzieren für Navigation und suchen Sie im Feld nach main navigation. In den gefilterten Ergebnissen werden möglicherweise zwei oder mehr Optionen angezeigt. Klicken Sie für Main navigation mit der Kategorie Superfishauf Block platzieren .

    Zeigt die Inhaltsblockseite

  7. Deaktivieren Sie das Kontrollkästchen Display title und klicken Sie auf Block speichern.

  8. Ziehen Sie Main navigation unter Site branding.

  9. Klicken Sie auf Blöcke speichern, um die Änderungen zu speichern.
  10. Navigieren Sie zur Homepage. Der Menülink APIs, den Sie im Hauptnavigationsmenü hinzugefügt haben, wird nun erweitert, wenn Sie den Cursor darüber bewegen.

    Endgültiges Hauptmenü mit der Aktualisierung

Die Themen dieses Tutorials

Sie haben einen Link für ein Dropdown-Menü im Menü Main navigation erstellt.

Nächste Schritte

Sie können jede andere Verwendung des Dropdown-Menüs in Betracht ziehen, um die Benutzererfahrung in Ihrem Developer Portalzu verbessern.