Alles auf einen Klick: DropDown-Menüs können mittlerweile leicht und weitgehend browserkompatibel verwendet werden. Diese Art von Menü vereint die Vorteile von horizontal und vertikal, und macht jede Seite direkt zugänglich – auch bei sehr umfangreichen Sites. Das scheint auf den ersten Blick ideal, hat aber gewichtige Nachteile.

DropDown-Menüs: Vorteile und Nachteile

Mittlerweile können alle Browser soweit mit CSS umgehen, dass Dropdown-Menüs ohne die schweren Nachteile von Javascript realisiert werden können. Eine Ausnahme bildet der IE6, der aber mit etwas Hilfe durch Jscript (oder Javascript) ebenfalls zur Mitarbeit überredet werden kann. Im großen und ganzen funktioniert es überall gleich: Das Menü ist bereits zur Gänze – also inklusive aller Menüpunkte – in Form von verschachtelten Listen im Quellcode vorhanden. Durch Hover (mit der Maus drüber) werden Teile davon sichtbar und wieder unsichtbar gemacht. Mit dem Style-Sheet lassen sich alle Ebenen getrennt gestalten.

Eine Suchmaschine sieht also ALLE Seiten im Menü – auf jeder Seite. Und: Ein Benutzer kann JEDE Seite direkt aufrufen – ebenfalls auf jeder Seite.

Klingt super, hat aber auch ein paar Nachteile:

Nachteile von DropDown-Menüs

Da ein horizontales DropDown-Menü in der Funktionsweise der Menüleiste von Programmen (zb hier des Browsers) ähnelt, wird es auch so benutzt. Aber es gibt einen wesentlichen Unterschied zwischen Programmen und einer Website: Programm-Menüleisten haben keine Hauptseiten, sondern nur Unterseiten. So zb hat der Menüpunkt "Extras"  im Browser keinen Inhalt, sehr wohl aber ein entsprechender Menüpunkt auf einer Website.
Das führt zu dem Dilemma, dass Besucher die wichtigsten (=übergeordneten) Seiten oft übersehen oder nur wenig beachten. Die typische Struktur einer Website  – Wichtiges in der obersten Ebene, mehr Details weiter unten - wird völlig aufgebrochen.

Bei vertikalen DropDown-Menü (auch "FlyOut-Menü") gibt es dieses Manko zwar nicht, aber alle anderen genauso.

Ein weiterer Nachteil solcher Menüs ist der üppige Quellcode: Es stehen ja alle Seiten bereits versteckt im Menü, die einzelnen Menüpunkte werden erst durch den Mouseover sichtbar gemacht. Wenn noch dazu volle Links mitsamt http://www.langerdomainname.org.vu.tv/ ausgegeben werden, macht das Menü allein schon 10k Quellcode aus.
Abhilfe schaffen relative Links. Bei manchen CMS ist das möglich, bei WB nicht. Ein Trick, der Linderung bringt: In der config.php reicht meistens auch "" (leer) als WB_URL, damit steht wenigstens die Domain nicht zig-fach im Quellcode. Möglicher Nachteil: Je nach Serverkonfiguration werden dann an die URLs Session_IDs angehängt, was den Effekt zunichte und Google wenig Freude macht. Also: Checken.

Und die Vorteile

Echte Vorteile haben Dropdown-Menüs, wenn tatsächlich die tiefsten Seiten die Wichtigsten sind, und aus dem Kontext sofort erkennbar sein soll, worum es geht.

Ein typisches Beispiel dafür ist zb das AMASP, in dem die WB-Module gelistet sind. Der Hauptmenüpunkt "Module" ist als solcher nicht weiter interessant – er muss keinen Inhalt haben. Ebenso die Unterteilung in "Listings" nicht. Interessant wird es erst bei den einzelnen Modulen selbst – hier steht, was Sache ist.
Allerdings: Natürlich muss es eine Seite "Module" geben, sonst gäbe es keinen Untermenüpunkt "Listings", den es wiederum geben muss, damit es Zugriff auf die einzelnen Module gibt. Es gibt also viele mehr oder weniger „leere“ Seiten. Und damit kommen wir zu einem weiteren Aspekt:

Wie Google mit DropDown-Menüs umgeht

DropDown-Menüs sind aus meiner Erfahrung bei Google wenig beliebt. Ein Grund mag sein, das sie etwas machen, was Google hasst wie die Pest: „Hidden Text“ – schlimmer noch: „Hidden Links“. Im Quellcode sieht Google jede Menge Links – die in einem Browser alle nicht sichtbar sind. Wie Google hier genau tickt, ist nicht bekannt, Fakt ist: Google macht Stichproben und checkt, ob das, was im Quellcode steht, auch im Browser sichtbar ist. Vielleicht sind es die berühmten „indischen Studenten“, vielleicht auch eine Art „Browser-zu-Text“ – man weiß es nicht.
Ein weiteres Problem: Der PageRank dient nur in geringem Maß dem Zweck, ganze Domains in den SERPs nach oben zu hieven, viel mehr wird er dazu verwendet, innerhalb einer Domain die wesentlichen Seiten auszumachen. Wenn auf jeder Seite Links zu allen anderen sind, greift der PageRank-Algorithmus nicht mehr, jede Seite ist gleich wichtig. Google kann nicht mehr erkennen, welche Seiten wichtig sind, und damit funktionieren einige weitere Sub-Algos nicht mehr. Die Site ist aus Suchmaschinen-Sicht also ein "Sonderfall"
Die Maschine Google gleicht immer die gesammelten Daten von einer Site mit dem Durchschnitt des Webs ab. Alles, was von diesem Durchschnitt zu weit entfernt ist, wird mit Argwohn betrachtet. Dieser Argwohn kann nur aufgebrochen werden, wenn eine Site sehr viele dauerhafte und renommierte Links von außerhalb = anderen Domains hat; der berühmte "TrustRank". Den zu bekommen, kann Jahre dauern.

Fazit

DropDown-Menüs brechen das gängige Schema auf. Das kann ein großer Vorteil sein, aber zumindest derzeit sind auch die Nachteile gewichtig. Man sollte sich genau überlegen, ob die Vorteile überwiegen. In jedem Fall muss der Inhalt an das Menü angepasst sein, was einen schnellen Wechsel des Templates verunmöglicht.
Ein Allheilmittel gegen Ziellosigkeit ("alles offen") sind DropDown-Menüs nicht.

Derzeit gibt es folgende Templates mit horizontalem DropDown-Menü in der Template-Suche.

Der "Hover Ghost Bug"

Die Fläche rechts sollte nicht sichtbar sein, sondern erst ausklappen, wenn der Mauszeiger über "Bildergalerien" bewegt wird. Das ist manchmal optisch irritierend, die Funktion ist davon nicht betroffen.

Die Templates "Glassberry" und "Module Finder" beruhen auf dem Standard-Template "allcss2". Alle 3 haben im IE den "Hover Ghost Bug" (auch "Nested Elements- Bug"): Bei sehr verschachtelten Menüs (> 2 Ebenen) werden Teile nicht immer richtig dargestellt.

"Journey" funktioniert anders und hat diesen Bug nicht.

Die übrigen Templates lassen nur 2 Ebenen zu, wodurch der Hover-Bug nicht auftritt.

	Glassberry Dropdown mit Blättern-Funktion Alle Seiten auf einen Klick zugänglich - und damit man den Überblick nicht verliert natürlich mit Breadcrumbs und Schaltern zum Blättern. Nochwas? Ja: Der Footer ist immer am untersten Rand. Damit auch kurze Seiten nicht in der Luft hängen.
	argos1 Ein sehr elegantes Template. Die Menüpunkte der 2. Ebene sind erst erreichbar, wenn der übergeordnete Menüpunkt angeklickt wurde. Das wertet zwar die übergeordnete Seite auf, kann aber dazu führen, dass deren Unterseiten unbeachtet bleiben, weil dieses Verhalten etwas ungewohnt ist.
	Multiflex-3 Der Name ist Programm Multiflex ist eine sehr grute Grundlage, wenn man sich mit HTML/CSS auskennt. Es ist für so ziemlich jeden Zweck geeignet und lässt sich immer wieder neu anpassen. Etwas ungewohnt ist der Umgang mit Untermenüpunkten. Leider: Schwere Darstellungsfehler im IE8
	Journey DropDown, Adsense Wenn kein Block2 vorhanden ist, wird die Description gezeigt. Statt Block3 kommt Google Adsense. Das große Bild heißt nach dem Muster "journeyNR.jpg" - damit kann jeder Seite ein eigenes Bild zugewiesen werden. Wird keines gefunden, wird eines aus dem Template Verzeichnis genommen.
	allcss2 Ausbaufähiges Juwel Für Freunde der Unfarbe schon jetzt ein Genuß, aber eigentlich ein Template, das noch nicht fertig ist, sondern als Basis für eigene Entwicklungen dienen soll. Alle Ebenen sind jederzeit direkt erreichbar. Diese Verhalten begünstigt die tiefer gelegenen Seiten und führt manchmal dazu, dass die obersten Seiten nicht/kaum beachtet werden.
	Module Finder Für das all modules and snippet project Das Template entspricht dem derzeitigen Standard-Template von websitebaker.org, allerdings mit einem etwas anderen Menü.

Ältere Kommentare:

05.11.2008

erpe

Hallo Chio

wieder mal ein Artikel in gewohnt sachlicher und fundierter Ausführung. Über die Schwierigkeiten oder Möglichkeiten mit den Suchmaschinen hatte ich ir bisher keine Gedanken gemacht. Für das AMASP-Project war alleine die Übersichtlichkeit entscheidend, auch wenn man dann den Nachteil in Kauf nehmen muss, dass die oberen Menupunkte (1. Level) wirklich nur Kategorien sind. Übrigens wird die Site relativ heftig von Suchmaschinen frequentiert, woran das auch immer liegen mag.
Und übrigens: Ich finde deine Seite hier total informativ und super designed.
Viele Grüsse von der Waterkant

erpe

08.11.2008

mr-fan

hi chio,

jetzt nutz ich mal deine komentarfunktion ;)
schöner UND interessanter beitrag!
habe beim multiflex ein bisschen mit der 3. ebene geschumelt über eine menulink seite auf ein dummymenu mit root+1...hab gelesen google mag die menulink-sache (301er) nicht? ein artikel darüber wäre auch was schönes... vom fachmann halt. immer weiter so und ich bin nur noch am lesen&lernen schöne grüße ins nachbarland martin

Zurück