Dropdown Menü

Dropdown-Menüs (oder auch Flyout-Navigation genannt) gibt es mittlerweile wie Sand am mehr. Jedoch gestaltet sich eine allgemein layoutunabhängige Umsetzung nach wie vor relativ schwierig.

Warum in JYAML nun ein eigenes Dropdown-Menü Konzept mitgeliefert wird, liegt daran, weil bei fast allen Lösungen keine oder nur eingeschränkte Tastaturnavigation möglich ist (Stichwort: Zugänglichkeit - Accessibility). Hier wurde also der Fokus auf die Zugänglichkeit gerichtet. Außerdem funktioniert das Aufklappen der Untermenüs auch vollständig ohne Javascript, soweit der Browser dies unterstützt.

Die Tastaturnavigation funktioniert über die Tab- und Shift+Tab Taste (Standard) sowie auch mit den Pfeiltasten.

Um das Dropdown-Menü zu aktivieren, muss in einem Menü Modul das Alternative Layout "dropdown" ausgewählt werden. In jedem Menü Modul sind zusätzliche Optionen verfügbar, um das Verhalten zu beeinflussen. Ein Teil dieser Optionen kann zusätzlich pro Menüpunkt verändert werden, um z.B. die Aufklapp-Richtung für einen bestimmten Menüpunkt zu ändern.

Layout Datei: /html/mod_menu/dropdown.php
Stylesheet: navigation.dropdown.css

Um das Layout anzupassen, sehen Sie sich die Beispiele im Stylesheet an.

Tipps und Hinweise:

  • Mit dem Dropdown-Menü und der Funktion "Module in Menüpunkt einfügen" können Sie sogar so genannte Megamenüs realisieren.
  • Damit auf jeder Seite alle Untermenüs aufklappbar sind, müssen Sie in den Moduleinstellungen die Option "Untermenüeinträge anzeigen" (bzw. Show Sub-menu Items) auf Ja stellen.

Nachfolgend eine Auflistung aller verfügbaren Einstellungen.


Standard Orientierung

Hier kann man die Ausrichtung (vertikal, horizontal) sowie Orientierung (links, rechts, oben, unten) für alle Menüpunkte konfigurieren. Das Dropdownmenü erkennt automatisch, wenn kein Platz mehr im Browserfenster ist und wechselt die Horizontale Ausrichtung von rechts nach links bzw. links nach rechts automatisch. Die vertikale Ausrichtung wird nicht automatisch beeinflusst, da es sonst je nach Layout Überlagerungen der Untermenüs entstehen.

Diese Option ist auch pro Menüpunkt im Joomla! Menümanager verfügbar.

Lineares/Mehrspaltiges Untermenü

Wenn aktiviert, wird das Untermenü auf die volle Breite ausgedehnt und alle direkten Untermenüs sind automatisch in einem Mehrspalten Raster aufgeteilt.

Animations Effekt (Anzeigen/Verbergen)

Bestimmt den Animations-Effekt der beim Anzeigen und Verbergen von Untermenüs verwendet werden soll.

Es sind mehrere Kombinationen aus Slide- und Fade-Effekten möglich.

Untermenü Deckkraft

Bestimmt die Deckkraft der Untermenüs. Diese Einstellung entspricht der CSS-Eigenschaft "opacity".

Verzögerung Untermenü ausblenden (ms)

Bestimmt die Verzögerungszeit in Millisekunden, wann das Untermenü ausgeblendet werden soll, wenn man mit der Maus oder Tastatur das Untermenü verlässt.

Dauer des Einblenden-Effekts (ms)

Bestimmt die Dauer des festgelegten Animation-Effekts in Millisekunden, wenn das Untermenü eingeblendet wird.

Übergangs-/Wechseleffekt beim Anzeigen

Bestimmt den Übergangs-Effekt (Art des Animation-Effekts) beim Anzeigen eines Untermenüs.

Diese Effekte basieren auf den jQuery Easing Effekten. Eine Demo der Effekte finden Sie hier: http://jqueryui.com/resources/demos/effect/easing.html

Dauer des Ausblenden Effekts (ms)

Bestimmt die Dauer des festgelegten Animation-Effekts in Millisekunden, wenn das Untermenü ausgeblendet wird.

Übergangs-/Wechseleffekt beim verbergen

Bestimmt den Übergangs-Effekt (Art des Animation-Effekts) beim Ausblenden eines Untermenüs.

Diese Effekte basieren auf den jQuery Easing Effekten. Eine Demo der Effekte finden Sie hier: http://jqueryui.com/resources/demos/effect/easing.html

Erstes Untermenü ausstrecken

Wenn aktiviert, wird die Breite der Untermenüs die schmaler sind als der übergeordnete Menüpunkt entsprechend gestreckt.