| Einen „Sticky Header“ oder eine „Sticky Navigation“ kennt man von vielen Webseiten wie Facebook, Twitter, etc.. „Sticky“ bedeutet hier übersetzt in etwa „klebend“, denn Sticky Elemente bleiben in einer Webseite im Browserfenster an einer fixen Position stehen, meistens oben oder seitlich. Der Header bei Facebook als Beispiel bleibt immer an derselben Stelle, während man die Timeline unter dem Header durchscrollen kann. In diesem Tutorial zeigen wir Euch, wie ein Sticky Header erstellt wird und man mit dem selben Prinzip eine Lightbox immer mittig im Browser eingeblendet kann. |
- Axure Version: 8.0
- Level: Basic
- Dauer: 20 min
- Themen: Axure Basic, Sticky, Pin to Browser, Overlay, Treat As Lightbox, Lightbox
|
Preview:
Das Konzept
Erstmal wird eine einfache Navigation im Dynamic Panel mit Pin to Browser fixiert. Hinweis: Nur ein Dynamic Panel kann als einziges Element in Axure gepinned werden. Die Seite wird mit Platzhalter-Content gefüllt. Im oberen Bereich der Seite wird außerdem ein Registrierungsformular (Dynamic Panel) mit Hidden ausgeblendet. Es wird als Lightbox eingeblendet, wenn man den Button im unteren Bereich der Seite anklickt. Obwohl der Button sehr weit unten liegt, wird das Formular immer mittig im Browserfenster eingeblendet und man muss nicht zuerst zu ihm scrollen. (Die Erstellung des Registrierungsformulars könnt Ihr in dieses Tutorial Registrierung mit Lightbox nachlesen.)
Vorbereitung
Ziehe vier gleich große Rectangles, gebe ihnen einen Style und benenne sie. Markiere anschließend alle vier Elemente und wandle sie mit Rechtsklick in einen Dynamic Panel um. Nenne dieses Panel dann „Sticky Header“.
Header Navi mit vier Punkten
Dynamic Panel: „Sticky Header“
Markiere das Sticky Header Panel und klicke rechts in den Widget Properties auf Pin to Browser (s.o.). Es öffnet sich ein kleines Fenster. Setze das Häkchen auf Pin to browser window und setze den ‚Horizontal Pin‘ auf Center und den ‚Vertical Pin‘ auf Top. Klicke auf OK. Hierdurch wird der Header im Browserfenster oben und mittig festverankert. Hinweis: Achte darauf, dass der Header an der Position y:0 liegt. Nur dann wird er auch ganz oben fixiert. Denn bei der Auswahl von ‚Left‘ oder ‚Top‘ werden die Koordinaten des Dynamic Panels als Verankerungspunkte genommen. Bei ‚Right‘ und ‚Bottom‘ hingegen ist kann die Positionierung über die Angabe in den Feldern ‚Margin‘ beeinflusst werden.
Pin to Browser: Horizontal & Vertical Pin festlegen
Platziere nun Content auf der Seite. Wir fügen vertikal 4 Platzhalterbilder hinzu, damit sich die Seite nach unten hin verlängert und man den Sticky Header Effekt später besser wahrnehmen kann.
Placeholder als Content
Zusätzlich platzieren wir im oberen Bereich der Seite das Registrierungspanel (falls ihr noch einmal nachlesen wollt, wie das gebaut wird, schaut in diesem Tutorial Registrierung mit Lightbox nach) in den Hintergrund und setzen es auf Hidden. Setze auch hier das Häkchen bei Pin to browser window. Bestimme, wo sich das Panel im Browser einblenden soll. Bei einer Lightbox empfiehlt sich Center und Middle.
Pin to browser window: Horizontal Center & Vertical Middle
Platziere nun ganz unten auf der Seite die Registrierungsbox mit dem Registrieren-Button. Bei Klick auf den Registrieren-Button wird das Formular durch die oben bestimmten Pin to browser Eigenschaften immer mittig im Browserfenster eingeblendet. Ohne diese Eigenschaft würde sich das Formular dort einblenden, wo es platziert ist. Das bedeutet, der Nutzer sich im unteren Bereich der Seite befindet und das Regisstrierungsformular öffnet, würde er es nicht wahrnehmen. Er müsste manuell hochscrollen, um die das Formular zu entdecken.
Registrieren-Box mit Registrieren-Button unten auf der Seite
