Wie man ein benutzerdefiniertes Menü designt

Hier erfahren Sie, wie Sie ein eigenes Menü designen können.

So bauen Sie es auf:

Siehe

Wählen Sie eine „Tabelle“ aus und platzieren Sie sie auf der Leinwand. Ändern Sie in der Palette Eigenschaften die Anzahl der Spalten und Dateien auf eine Datei und vier Spalten und passen Sie die Höhe der Tabelle an, um eine Kopfzeile zu simulieren.

Wählen Sie jede Zelle einzeln aus und ändern Sie in der Palette Eigenschaften das Layout auf „Horizontal“.

Platzieren Sie vier zentrierte Texte auf der Leinwand und schreiben Sie: „Home“, „Produkte“, „Dienstleistungen“ und „Über“. Halten Sie die Befehlstaste (Mac) bzw. die Steuerungstaste (Windows) gedrückt und ziehen Sie die Elemente in die Zellen.

Geben Sie in der Bibliothek „Webkomponenten“ ein „Chevron down“-Symbol neben „Produkte“, „Dienstleistungen“ und „Über“ ein. Nachdem Sie jeder Zelle ein horizontales Layout gegeben haben, wird das Symbol horizontal zum Text positioniert. In der Palette Eigenschaften können Sie den Abstand zwischen dem Text und dem Symbol anpassen.

Für die Menüoptionen legen Sie eine neue „Tabelle“ an und ändern in der Palette Eigenschaften die Spalten auf eine und die Zeilen auf drei.

Halten Sie die Befehlstaste (Mac) bzw. die Steuerungstaste (Windows) gedrückt und platzieren Sie in jeder Zelle 3 Texte für „Artikel 1“, „Artikel 2“ und „Artikel 3“.

Gehen Sie bei ausgewählter „Tabelle“ zur Palette Eigenschaften und ändern Sie die Farbe aller Rahmenoptionen auf hellgrau und deaktivieren Sie den inneren Rahmen, der die Zellen trennt.

Markieren Sie die „Tabelle“, die wir erstellt haben, halten Sie die Alt-Taste gedrückt und ziehen Sie sie, um sie zu duplizieren, legen Sie sie unter „Dienste“ ab und duplizieren Sie sie ein weiteres Mal für „Über“. Gehen Sie bei ausgewählter „Tabelle“ unter „Info“ zur Palette Eigenschaften und ändern Sie die Anzahl der Zeilen auf zwei.

Wählen Sie die Artikeltabellen einzeln aus, klicken Sie mit der rechten Maustaste darauf und wählen Sie die Option „Im dynamischen Panel gruppieren“.

Stellen Sie sicher, dass jedes „Dynamische Panel“ über den Rand der Tabelle, die es enthält, hinausragt, damit die Ereignisse, die wir als nächstes erstellen, korrekt funktionieren.
Wählen Sie die drei dynamischen Felder, die als Dropdowns funktionieren, gehen Sie zur Palette Eigenschaften und klicken Sie auf das Symbol „In der Simulation ausgeblendet“. Die Dropdowns werden in der Simulation standardmäßig nicht sichtbar sein.

Ereignisse

Wenn Sie die Zelle „Produkte“ ausgewählt haben, gehen Sie zur Palette „Ereignisse“ und klicken Sie auf „Ereignis hinzufügen“.

Klicken Sie in dem Dialogfenster auf „Auslöser wählen“, bewegen Sie den Mauszeiger über den Abschnitt „Maus“ und wählen Sie „Bei Mauseingabe“.
Wählen Sie unter „Aktion auswählen“ die Option „Ausgeblendetes Element anzeigen“ und wählen Sie das „Dynamische Panel“, das als Dropdown für die Option „Produkte“ dient. Klicken Sie auf „Ok“, um die Erstellung des Ereignisses abzuschließen.

Wenn die Zelle „Produkte“ noch ausgewählt ist, gehen Sie zur Palette Ereignisse und klicken Sie auf das „+“, um ein Ereignis hinzuzufügen.

Klicken Sie in dem Dialogfenster auf „Auslöser wählen“, bewegen Sie den Mauszeiger über den Abschnitt „Maus“ und wählen Sie „Bei Mauseingabe“.
Wählen Sie unter „Aktion auswählen“ die Option „Element ausblenden“ und markieren Sie die beiden „Dynamischen Felder“, die als Dropdowns für die Optionen „Dienste“ und „Über“ dienen. Klicken Sie auf „Ok“, um die Erstellung des Ereignisses abzuschließen.

Klicken Sie in der Palette Ereignisse zwischen den beiden Optionen auf den Pfeil und ändern Sie ihn in die Option „MIT vorheriger“, so dass beide Aktionen gleichzeitig ausgeführt werden.

Wiederholen Sie die Vorgänge für jede obere Menüoption und das entsprechende Dropdown-Menü. In jedem Fall müssen wir das „Dynamische Panel“ auswählen, das wir anzeigen möchten, und das, das wir ausblenden möchten.

Wählen Sie die Zelle „Home“ und gehen Sie zur Palette „Ereignisse“, klicken Sie auf „Ereignis hinzufügen“.

Klicken Sie in dem Dialogfenster auf „Auslöser wählen“, bewegen Sie den Mauszeiger über den Abschnitt „Maus“ und wählen Sie „Bei Mauseingabe“.
Wählen Sie unter „Aktion auswählen“ die Option „Element ausblenden“ und wählen Sie die drei „Dynamischen Panels“ der Optionen. Klicken Sie auf „Ok“, um die Erstellung des Ereignisses abzuschließen.

Wählen Sie die „Dynamischen Panels“ der Option „Produkte“ und gehen Sie zur Palette „Ereignisse“, klicken Sie auf „Ereignis hinzufügen“.

Klicken Sie in dem Dialogfenster auf „Auslöser wählen“, bewegen Sie den Mauszeiger über den Abschnitt „Maus“ und wählen Sie„bei Mausverlassen„.
Wählen Sie unter „Aktion wählen“ die Option „Element ausblenden“ und wählen Sie dasselbe „Dynamische Panel“. Auf diese Weise wird das „Dynamische Panel“ beim Verlassen nicht mehr angezeigt. Klicken Sie auf „Ok“, um die Erstellung des Ereignisses zu beenden.

Wiederholen Sie den gleichen Vorgang für jedes „Dynamische Panel“.

Markieren Sie die erste Zelle (Element 1) der Spalte im „Dynamischen Panel“ der Option „Produkte“, gehen Sie zur Palette „Ereignisse“ und klicken Sie auf „Ereignis hinzufügen“.

Klicken Sie in dem Dialogfenster auf „Auslöser wählen“, bewegen Sie den Mauszeiger über den Abschnitt „Maus“ und wählen Sie„bei Mausüberschreitung„.
Wählen Sie unter „Aktion auswählen“ die Option „Stil ändern“ und im Dropdown-Menü „Zu ändernden Stil auswählen“ die Option Hintergrund und bearbeiten Sie die Farbe. Auf diese Weise erzielen wir einen Feedback-Effekt, wenn Sie den Mauszeiger über „Artikel 1“ bewegen. Klicken Sie auf „Ok“, um die Erstellung des Ereignisses abzuschließen.

Während die Zelle (Element 1) noch ausgewählt ist, gehen Sie zur Ereignispalette und klicken Sie auf die Schaltfläche „Alle Ereignisse kopieren“. Wählen Sie dann jede der Zellen aus und klicken Sie auf die Option „Alle Ereignisse einfügen“. Das Ziel wird automatisch geändert.

Simulieren Sie Ihren Prototyp.