Menü Mosaik Layout

Hier schauen wir uns das Mosaik-Layout für ein Menü an. Das Menü und Menüpunkte erscheinen üblicherweise als horizontale Navigationsebene oder als Hamburger Menü auf Mobilgeräten.

Das Mosaik Menü-Layout ermöglicht eine flexible und visuell ansprechende Ansicht von Menüpunkten. So können Sie sehr einfach verschiedenen Landingpages anbieten und leicht pflegen.

Bitte beachten Sie, dass an dieser Stelle nicht die gesamte Funktionsweise der Joomla Modulverwaltung erklärt wird.
Es werden nur die für die Nutzung der B01 Template Layouts nötigen Schritte erklärt.

Beispiel:

Menü Pflege

Das Menü ist ein normales Joomla Menü, welche Sie mit allen Möglichkeiten des Systems pflegen können. Die darin enthaltenen Menüeinträge können Links auf JFeWo Objektschnittmengen oder andere Inhalte sein.

Menüpunkt Konfiguration

Reiter Details

Menüeintragstyp

Menüpunkt
beliebiger Menüpunkt auf eine JFeWo Objektliste oder andere Inhalte.
Umbruch
Wenn Sie im Mosaik nach einigen Elementen einen Umbruch umsetzen wollen, können Sie das mit einem Menüeintrag des Types Trennzeichen (Seperator) umsetzen. Die Anzahl der Elemente pro Zeile ist flexibel und kann auch asymetrisch sein, sollte jedoch visuell sinnvoll gewählt werden.
Heading
Damit können Sie ein Element erstellen, welches nicht verlinkt ist und nur einen Titel und evtl. ein Bild enthällt.

Notiz

Unter Notiz können Sie einen kurzen, zusätzlichen Text eingeben, welcher unter dem Bild erscheint.

Reiter Linktyp

Unter CSS-Klasse für Link können Sie eine Ihrer Primärfarben zuordnen. Das wären b01-card-primary, b01-card-secondary, b01-card-tertiary oder b01-card-quaternary
Sie können unter Icon-Klasse zum Link ein Icon, wie z.B. user oder happy zuordnen. Sie finden alle möglichen Icons in der UIkit Icons Dokumentation. Natürlich können Sie mit einer eigenen Template Variation auch eigene Icons verwenden.
Unter Bild zum Link können Sie das Bild aussuchen, welches im Grid-Element erscheinen soll.

Im CSS-Klasse Parameter können Sie alle Anpassungen des Grids (Mosaik-Struktur) durchführen, welche das UIkit Grid erlaubt. Sie können z.B. die Abstände des Grids festlegen. Wählen Sie dazu aus b01-grid-small, b01-grid-large, b01-grid-collapse, etc.
Sie finden alle Möglichkeiten in der UIkit Grid Dokumentation.