Expand Menu

Copyright @ Online Solutions Group

Was bedeutet Expand Menu?

Ein Expand Menu ist ein UI-Steuerelement, das sich nach einer Benutzeraktion (zum Beispiel ein Klick) erweitert und so weiteren Inhalt freigibt. Anwender klicken auf Kopfzeilen, um Inhalt, der in logische Abschnitte unterteilt ist, zu erweitern und vollständig sichtbar zu machen. Optional können Abschnitte beim Mouseover geöffnet oder geschlossen werden.

Ein Expand Menu macht Webseiten übersichtlicher

Das Expand Collapse Menu ist auf vielen Webseiten Teil der Navigation und wird gerne als Accordion Menu umgesetzt. Accordions in der Benutzeroberfläche können sich auf Menüs, Widgets oder Inhaltsbereiche beziehen, die sich wie das Musikinstrument ausdehnen (expand) und wieder zusammenziehen (collapse). Diese Schnittstellen sind in den letzten Jahren mit der Erweiterung von JavaScript-Funktionalitäten und vor allem mit dem JS-Framework jQuery beliebter geworden. Eine Alternative zu JavaScript ist die erweiterbare Akkordeon-Benutzeroberfläche mit CSS3. Der wesentliche Vorteil bei dieser Herangehensweise ist, dass CSS3 nicht so viel Code benötigt und eine einfachere Methode der Animation bietet. Accordions sind beliebt, weil sie es Entwicklern ermöglichen, große Mengen an Inhalten in relativ kleine Bereiche auf der Seite zu zwingen – damit sind sie auch prädestiniert für Expand Menus. Diese Inhaltsanzeigen erfordern allerdings auch dynamische Effekte, um zwischen Seitenelementen zu wechseln – also gibt es Vor- und Nachteile für Akkordeons.

Warum Akkordeon Menüs benutzen?

Nicht jede Website benötigt ein Expand Collapse Menu und Anwender begegnen diesen Navigationshilfen auch nicht überall. Der Zweck von einem Expand-Menu ist es, eine Vielzahl an Inhalten durch dynamisches Umschalten übersichtlicher zu gliedern. Entwickler sollten sicherstellen, dass jede Expand- oder Akkordeonkomponente einen wirklichen Zweck hat. Wenn Menüpunkte oder Inhalte auf der Seite auch ohne Expand/Collapse-Funktionalität übersichtlich aufgelistet werden können, sollten Betrachter nicht dazu gezwungen werden zu klicken, bevor sie Inhalte betrachten können. Dynamisch erweiterbare Elemente in Benutzeroberflächen sind hilfreich mit größeren Menüs oder Inhalten, die sich mit erweiterbaren Abschnitten sauberer darstellen lassen. Dies können Unterüberschriften oder sogar mehrere Ebenen sein – der Zweck besteht darin, Inhalte so zu organisieren, dass die Navigation einfacher wird als endloses Scrollen.