Header

Code & Ressourcen in Component Library anzeigen

Der Header bildet den Beginn einer jeden Seite. Durch den Einsatz der Bildwortmarke kennzeichnet er den Absender der Website und stellt mit dem Hauptmenü das zentrale Navigations-Werkzeug bereit. Daneben beinhaltet er im oberen, rechten Bereich die Meta-Navigation mit wichtigen Service-Links sowie eine Suchfunktion im mittleren rechten Bereich an. Im unteren Bereich können im Top-Menü optional Links zu besonders wichtigen Seiten angezeigt werden.

Der Header zeigt im Start-Zustand all seine Bestandteile in einem großzügigen Layout an. Damit wichtige Funktionen, wie beispielsweise das Menü, auch dann bereitstehen, wenn die Seite bereits nach unten gescrollt wurde, wird der Header am oberen Rand des Browser fixiert und scrollt nicht mit. Um gleichzeitig nicht zu viele der Seiteninhalte zu verdecken, wechselt der Header beim Herunter-Scrollen in ein minimiertes Layout, welches weniger vertikalen Platz einnimmt, aber dennoch alle wichtigen Funktionen zur Verfügung stellt. Die Bildwortmarke animiert hierbei zu einer Minimalversion. Weitere Informationen zur Bildwortmarke finden sich hier.