| Mit Axure 7 haben Dynamic Panles einige neue Optionen erhalten. U.a. die Treat as Flyout Option. Mit dieser Option lassen sich sehr schnell komplexe Navigationen erstellen. Ein typischer Anwendungsfall ist ein Mega Drop Down Menü. |
- Axure Version: 8.0
- Level: Beginner
- Dauer: 30 min
- Themen: Axure Basics, Mega Drop Down, Navigation, Treat As Flyout
|
Preview:
Das Konzept
Das Submenu wird als Dynamic Panel per Mouseover (oder Click) mit dem Event Treat as Flyout eingeblendet. Da ein Menü mehrere Untermenüs haben kann – bekommt das Dynamic Panel für jeden Hauptnavigationspunkt einen zusätzlichen State. Die komplette Logik für das Ein- und Ausblenden des Submenus übernimmt Axure.
1 Vorbereitung
Im ersten Schritt werden alle benötigten Elemente auf der Bühne angelegt und platziert. Lege drei Hauptnavigationspunkte (‚Skateboards‘, ‚Longboars‘ und ‚Surfboards‘) mit dem Widget Button Shape an. Wenn Du die Navigationselemente richtig positioniert hast, ziehe direkt unterhalb der Hauptnavigation ein Dynamic Panel Widget und nenne es ‚Submenu‘.
Hauptnavigationspunkte und Submenu anlegen
2 Submenu aufbauen
Öffne das Dynamic Panel im ersten State und vergebe eine beliebige Hintergrundfarbe im Panel State Formating.
Dynamic Panel ‚Submenu‘: Hintergrundfarbe wählen
Füge dem Submenu Panel für jeden Hauptnavigationspunkt (außer ‚Home‘) einen State hinzu. Das Submenu hat dann drei States: ‚Skateboards‘, ‚Longboards‘ und ‚Surfboards‘.
Dynamic Panel ‚Submenu‘: drei States anlegen
Füge den drei States nun die jeweiligen Inhalte hinzu.
Dynamic Panel ‚Submenu‘: ‚Skateboards‘
Dynamic Panel ‚Submenu‘: ‚Longboards‘
Dynamic Panel ‚Submenu‘: ‚Surfboards‘
Wichtig: Nachdem alle Inhalte gesetzt sind, verlasse das Dynamic Panel wieder, markiere das Dynamic Panel Submenu auf der Bühne und stelle das Panel im Fenster Widget Properties auf 100% Wide (browser only). Dadurch hat das Submenu immer die Breite des Browserfensters.
Dynamic Panel ‚Submenu‘ auf 100% Wide (browser only) setzen
Zum Schluss das Submenu Panel noch auf Hidden setzen – damit es auch bei MouseEnter sichtbar werden kann.
Dynamic Panel ‚Submenu‘ auf Hidden setzen.
3 Interaktion erstellen
Das Submenu soll nun bei OnMouseEnter eingeblendet und bei OnMouseOut ausgeblendet werden. Hier kommt nun die Treat as Flyout Aktion zum Einsatz. Markiere den ersten Navigationspunkt (‚Skateboards‘) und füge dem Event OnMouseEnter die Aktion Show hinzu. Wähle im Case Editor nun das Dynamic Panel ‚Submenu‘ aus und wähle unter More Options die Aktion Treat as Flyout aus.
Füge allen Hauptnavigationspunkten diese Aktion hinzu.
Case Editor: Show Dynamic Panel ‚Submenu‘ – More Options treat as fylout
Damit jeweils der richtige State zum passenden Hauptnavigationspunkt angezeigt wird, muss noch das Submenu mit der Aktion Set Panel State auf den jeweils richtigen State gesetzt werden. Die Aktion wird vor der Show Aktion eingesetzt – damit der Wechsel später nicht sichtbar ist.
Set Panel State to…
Die fertige Interaktion sieht dann wie folgt aus:
Fertige Interaktion auf den Menü-Buttons
4 Highlighting setzten
Am Ende noch über die Interaction Styles das Higlighting der Hauptnavigation einstellen. Alle Hauptnavigationspunkte auswählen und per Rechtsklick die Interaction Styles auswählen und definieren.
Interaktion Styles setzten
