Menügestaltung

Menü-Arten

Grundsätzlich gibt es nur zwei Arten von Menüs:

1. Die komplette Menühierarchie wird beim Drüberfahren mit der Maus angezeigt (Flyout- bzw. Dropdown-Menü).
2. Beim Drüberfahren mit der Maus werden tieferliegende Ebenen nicht eingeblendet – man muss einen bestimmten Menüpunkt auswählen, um dessen Kinder (so er welche hat) eingeblendet zu bekommen (Statisches Menü).

Beide Arten sind hier wahlweise realisiert – klicken Sie einfach auf den Verweis "Button-Menü" bzw. "Flyout-Menü" unten links in der Navigationsspalte.

Flyout- bzw. Dropdown-Menü

Solche Menüs klappen unter dem Mauszeiger auf und ermöglichen den direkten Zugriff auf alle (wichtigen) Seiten der Website, ohne dass der Bediener sich "durchhanteln" muss. Sie erlauben es dem Besucher, schon beim "mauseln" über das Menü sich sofort den Überblick über Umfang, Gliederung und Inhalt der Website zu verschaffen, sind also für die rasche Orientierung absolut unschlagbar.

Lange Zeit vermochte man sie aufgrund von Schwächen in Internet Explorer nur mittels JavaScript zu realisieren, was nicht nur aufwendig ist (da jeder Browser auch hier seine Eigenheiten aufweist) sondern vor allem weder barrierefrei noch für Suchmaschinen zugänglich. Inzwischen hat jedoch ein Kollege eine Möglichkeit gefunden, diese Art von Menü – mit einigen Tricks und sehr viel Können – in allen gängigen Browsern ausschließlich mittels HTML und CSS zu implementieren. Von seiner Arbeit ausgehend haben wir das hier enthaltene Flyout-Menü entwickelt, das sich problemlos bei Kunden – auch als Dropdown-Menü – einsetzen lässt.

Statisches Menü

Hiermit sind Menüs gemeint, die keine weiteren Ebenen aufklappen, wenn man mit der Maus darüber fährt. Demnach kann man nur die sichtbaren Einträge anklicken, und erhält ggf. im nächsten Schritt weitere Auswahlmöglichkeiten. Im Gegensatz zum Flyout-Menü bekommt man den Umfang der Website nicht gleich zu sehen – man muss sie "abklappern" (bzw. die Sitemap aufrufen – wenn es eine gibt und wenn man sie findet). Als Besonderheit weisen hier die Zeichen ≡ und » am Ende der Beschriftung auf vorhandene Unterebenen hin.

Menü-Lage und -Ebenen

Generell werden Menüs in der linken Spalte (untereinander) oder oben quer (nebeneinander) platziert. Alles andere ist "exotisch" und sollte nur dann zum Einsatz kommen, wenn besondere Gründe dies rechtfertigen; ansonsten hält man sich besser an die vom Besucher erwartete Konvention, damit er sich wie gewohnt zurecht findet. Flyout- und Dropdown-Menüs gehen ihrer Art entsprechend immer nur von einem Ort aus; bei statischen Menüs kann die zweite Ebene eingespreizt werden (wie hier beim Button-Menü) oder darunter / daneben / ganz wo anders angezeigt werden. Was man z.B. manchmal sieht, ist die erste Menüebene oben quer, mit der zweiten, davon abhängigen Ebene vertikal in einer linken Spalte (oder umgekehrt).

Umfasst eine Website mehr als ca. 10 Seiten, so müssen sie hierarchisch gegliedert und über mehr als eine Ebene angesprochen werden. Zwei Ebenen sieht man häufig; wird eine dritte Ebene benötigt, so kann es mit statischen Menüs schwierig sein, den Platz dafür zu finden bzw. schaffen. Hier kann man sich ggf. mit Reitern behelfen.