Header

Das Menü auf der zweiten Ebene hat ein „Block“-Layout bei der Desktop-Ansicht und jede Seite kann individuell in der Breite und Höhe angepasst werden, indem bestimmt wird, wie viele Spalten oder Zeilen das Menü-Item einnehmen soll. Dazu wird bei den Seiteneigenschaften der jeweiligen Seite ein bestimmter Key in einem Spezialfeld hinterlegt.

1. Kein Eintrag bedeutet, dass das Menü Item dieser Seite in der Breite zwei Blöcke einnimmt und in der Höhe nur einen.
2.  „large_menu_item“ bedeutet, dass das Menü Item dieser Seite über zwei „Blöcke“ nach unten geht
3.  „small_menu_item“ bedeutet, dass das Menü Item dieser Seite nur einen Block in der Breite einnimmt.

Die farbigen Linien stellen das „Box“-Modell mit seinen Spalten und Zeilen dar.

Die schraffierten Flächen sind die definierten Abstände zwischen den Spalten und Zeilen und werden nur eingehalten, falls es das jeweilige Layout benötigt. Also eine Einstellung in den Seiteneigenschaften vorgenommen wurde, sodass z. B. zwei Menü-Items nebeneinander in einer Zeile sind – siehe nachfolgend.

Je nach Einstellung rücken die nachfolgenden Seiten automatisch an die nächste freie Stelle auf.

Variante 1: Es werden keine Einstellungen vorgenommen: Alle Seiten werden untereinander dargestellt und nehmen die komplette verfügbare Breite ein.

Der blau eingerahmte Menüpunkt geht über zwei Zeilen hinaus. Optisch ist bei dieser Einstellung kein Unterschied zu erkennen, erst in Kombination mit einer Einstellung in einer anderen Seite wird optisch eine Veränderung sichtbar. Diese Einstellung dient dazu einen Menüpunkt in der Höhe zu vergrößern, um z. B. auf der gegenüberliegenden Seite zwei Menüpunkte darstellen zu können.

Der rot eingerahmte Menüpunkt nimmt nur einen Block in der Breite ein.

Werden jetzt diese Anwendungsfälle kombiniert, können verschiedene Layouts dargestellt werden:

• rot eingerahmt = small_menu_item
• blau eingerahmt = large_menu_item

Funktionsweise: Beim Hovern über Menüpunkte (Destinationen) wird in einer SVG-Karte der entsprechende geografische Bereich (z. B. eine Region in Österreich oder Italien) hervorgehoben.

Exklusivität: Dieses Feature ist aktuell nur für das mbh-Portal implementiert. 

Zweck: Es dient der visuellen Orientierung des Nutzers innerhalb der angebotenen Bike-Regionen direkt in der Navigation.

Das Menü wird mobil in einem Burger-Menü dargestellt. 

Für die Anzeige der geografischen Karten der Bundesländer muss bei den jeweiligen Records zum Bundesland eine Karte hinterlegt werden. 

Im mobilen Menü werden ganz unten einige Quicklinks eingefügt.

Diese können im Typo3-Element „Header-Links“ einmalig auf der Home Seite hinterlegt werden. Sie werden dann auf alle Unterseiten vererbt.

In einer Repeater-Box können hier pro Item Titel, Link und Bilder hinterlegt werden. Nur der Link ist ein Pflichtfeld. Ist nur dieser hinterlegt, werden Titel und Bild aus den Seiteneigenschaften der verlinkten Seite ausgelesen und verwendet.

Die Informationen, die für die Repeater-Boxen ausgelesen werden, können in den Seiteneigenschaften im Reiter „BN Einstellungen“ hinterlegt werden.

Es gibt die Möglichkeit ein Bild im Submenü auf Desktop anzuzeigen. 

Dieses wird in den Seiteneigenschaften > BN Einstellungen > Abschnitt Link-Boxen > Bild/er hinterlegt. In der Regel wird hier ein einzelnes Bild hochgeladen, das dann im Dropdown-Bereich des Menüpunkts erscheint.

Unabhängig von manuell eingefügten Bildern wird bei MBH für den Menüpunkt "Destinationen" automatisch die interaktive SVG-Landkarte eingebunden.

Das Bild passt sich in der Höhe entsprechend der Höhe der vorhandenen Menüpunkte an. 

Das Hauptmenü von Gravel ist ein Burger-Menü:

• Zweizeiliges Wording: Hauptmenüpunkte unterstützen Haupttitel und Untertitel (via nav_title “Alternativer Navigationstitel” in den Seiteneigenschaften).
• Desktop-Hover auf Hauptmenüpunkte: es öffnen sich auf der rechten Seite die Untermenüpunkte
• Icon-Unterstützung: Icons können direkt neben den Hauptmenüpunkte ausgegeben werden (via “Spezialfeld”) 

Bei Gravel gibt es die Möglichkeit bereits Quicklinks im Desktop Header anzugeben diese werden zwischen Logo und weitere Links zentral in der Headerleiste angezeigt. 

Auf mobilen Geräten sind diese Quicklinks als Slider implementiert.

Burger-Menü: Auch auf Desktop-Größen wird ein Burger-Menü verwendet, das eine seitliche Navigation (Side-Menu) öffnet.

Transparenter Header über Vista

Bei RBH gibt es die Möglichkeit bereits Quicklinks im Desktop Header anzugeben diese werden zwischen Logo und weitere Links zentral in der Headerleiste angezeigt. 

Auf mobilen Geräten sind diese Quicklinks als Slider implementiert.

Über das Feld “Spezialfeld” können Menüpunkte als "Highlights" mit Icon markiert werden (z. B. highlight|Navigation/check). Die Pipe “|” trennt den highlight Befehl vom gewählten Icon.

Diese erscheinen im Dropdown-Menü prominent mit einem Icon.

Diese besitzen ein besonderes Layout und können in den Seiteneigenschaften über das Feld “Spezialfeld” definiert werden: icon|Usable/General/light-bulb

Die Pipe “|” trennt den icon Befehl vom gewählten Icon.

Für die Destination ist ein besonderes Layout mit kleine SVG-Karten des jeweiligen Landes (z. B. Österreich, Italien) umgesetzt.

Es gibt die Möglichkeit ein Bild im Submenü auf Desktop anzuzeigen. 

Dieses wird in den Seiteneigenschaften > BN Einstellungen > Abschnitt Link-Boxen > Bild/er hinterlegt. In der Regel wird hier ein einzelnes Bild hochgeladen, das dann im Dropdown-Bereich des Menüpunkts erscheint.

Manuell hinterlegte Bilder in diesem Feld werden nur angezeigt, wenn keine Highlights oder Icon Darstellung definiert ist.

Das Bild passt sich in der Höhe entsprechend der Höhe der vorhandenen Menüpunkte an. 

Das Submenü nutzt eine dynamische Grid-Steuerung. Durch das Setzen von "Spacern" im TYPO3-Seitenbaum kann gesteuert werden, wann eine neue Spalte im Menu beginnt.

Im Fall des Submenüs der Destinationen wird durch das Setzen eines Spacers eine neue Zeile begonnen. 

Es gibt die Möglichkeit bereits Quicklinks im Desktop Header anzugeben, diese werden zwischen Logo und weitere Links zentral in der Headerleiste angezeigt. 

Auf mobilen Geräten sind diese Quicklinks als Slider im Menü implementiert.

Zweistufiges, interaktives Destination-Auswahl im Menu:

• Länder-Auswahl: Im Dropdown-Menü unter “Destinationen” erscheinen links zunächst die verfügbaren Länder (z. B. Österreich, Italien) mit ihren jeweiligen Länder-Icons (SVG-Karten).
• Dynamischer Hover-Effekt: Sobald ein Nutzer mit der Maus über ein Land fährt, werden auf der rechten Seite dynamisch die passenden Regionen und Destinationen dieses Landes eingeblendet.

Wie bei anderen Angebotsgruppen kann auch hier ein Icon pro Menüpunkt der zweiten Ebene unter den Seiteneigenschaften > BN Einstellungen > Spezialfeld  hinterlegt werden.

Motorrad-Fallback-Icon: Eine Besonderheit ist, dass Menüpunkte ab der ersten Unterebene (außer bei Ländern/Destinationen) automatisch ein spezielles Motorrad-Icon erhalten, sofern kein individuelles Icon im Backend hinterlegt wurde.

Das Submenü nutzt eine dynamische Grid-Steuerung. Durch das Setzen von "Spacern" im TYPO3-Seitenbaum kann gesteuert werden, wann eine neue Spalte im Menu beginnt.

Für die Destination ist ein besonderes Layout mit kleine SVG-Karten des jeweiligen Bundeslandes umgesetzt.

Auf mobilen Geräten sind diese Quicklinks als Slider im Menü implementiert.

Auf Desktop öffnet sich ein zentriertes Submenü. Beim Hovern über die erste Unterebene erscheint rechts eine zusätzliche Spalte für die zweite Unterebene

Für Punkte im ersten Submenü können Icons in den Seiteneigenschaften > BN Einstellungen > Spezialfeld  hinterlegt werden.

Struktur: Die Aufteilung in die rechte Spalte erfolgt rein durch die hierarchische Schachtelung im Seitenbaum; Spacer werden hier nicht für die Spaltentrennung benötigt.

Auf mobilen Geräten sind diese Quicklinks als Slider im Menü implementiert.