DROPDOWN MENU by Tonino Gerns

DROPDOWN MENU ist ein Builder-Element für YOOtheme Pro 4 und 5 auf Joomla 5 und 6. Du ziehst es in eine Zeile, wählst eines deiner bestehenden Joomla-Menüs aus und bekommst einen Button, der es als Dropdown ausklappt. Der Umweg über eine Modulposition entfällt, dein Joomla-Menü bleibt die einzige Quelle. 27 Einstellungen stehen im Builder bereit, dazu ein Feld für eigenes CSS. Eine eigene CSS- oder JavaScript-Datei bringt es nicht mit, es nutzt das UIkit 3 von YOOtheme Pro.

Menüquelle, Ebenen und Zugriffsrechte

Du wählst das Menü aus einer Liste aller angelegten Joomla-Menüs. Eingelesen werden die Punkte über den mod_menu-Helper, also wie bei einem normalen Menümodul: Zugriffsebenen greifen weiter, Punkte mit abgeschalteter Option „Im Menü anzeigen“ bleiben samt Unterpunkten draußen, Links kommen als SEF-URL aus Joomlas Router, Alias-Punkte zeigen auf ihr Ziel, mehrsprachige Seiten liefern die passende Sprachvariante. Standardmäßig richtet sich die Ausgabe nach dem aktuellen Menüpunkt, alternativ fixierst du sie mit einem Basis-Element auf denselben Zweig. Start- und End-Ebene liegen zwischen 1 und 10, eine Option zeigt jedes Untermenü statt nur des aktiven Zweigs.

Button und Dropdown einstellen

Der Button trägt Text, ein Icon oder beides. Als Icon nimmst du einen Eintrag aus der UIkit-Icon-Bibliothek oder eine eigene SVG-Datei, die Größe liegt zwischen 10 und 100 Pixeln, die Position links oder rechts vom Text. Acht Button-Stile stehen zur Wahl (Standard, Primary, Secondary, Danger, Text und drei Link-Varianten), dazu drei Größen, volle Breite und drei Ausrichtungen. Der Button-Text lässt sich an Dynamic Content binden. Das Dropdown setzt du an 14 Stellen relativ zum Button, es öffnet per Klick oder Hover, der Abstand ist in Pixeln frei wählbar, sechs Animationen stehen bereit.

Das Menü im Dropdown

Im Inneren gibt es vier Menütypen: Standard, Nav, Subnav und Iconnav. Trennlinien lassen sich zuschalten, dazu drei Nav-Stile und vier Größenstufen für Primary. Gerendert wird über die Menü-Templates von YOOtheme Pro, das Dropdown übernimmt Typografie und Farben aus deinem Style. Menüpunkte dürfen Bilder oder Icons tragen: Bild und CSS-Klasse kommen aus den Optionen des Joomla-Menüpunkts, Icons und Untertitel aus dem Menü-Editor des YOOtheme-Customizers. Breite und Höhe gelten zentral, SVG-Dateien lassen sich inline einbetten.

Bedienbar mit Tastatur und Screenreader

Navigation ist einer der ersten Punkte, den eine Prüfung nach Barrierefreiheitsstärkungsgesetz (BFSG) und EN 301 549 anfasst. An diesen Stellen ist das Element nach WCAG 2.1 AA gebaut: Der Auslöser ist ein echtes button-Element, sitzt in der Tab-Reihenfolge, reagiert auf Enter und Leertaste und trägt aria-haspopup sowie ein aria-expanded, das UIkit 3 beim Öffnen und Schließen umschaltet. Escape schließt es wieder, und auch im Hover-Modus klappt es auf, sobald der Button den Tastatur-Fokus erhält. Die Einträge erscheinen als reguläre Liste aus Links, wie ein Screenreader es erwartet.