Css Menü - Css Navigation
Immer wieder wundere ich mich beim Besuch verschiedener Seiten über die aufwändigen Menüs, die lange Ladezeiten beanspruchen oder aus Sicht der Suchmaschinenoptimierung kontraproduktiv sind.
Java Script Menüs sind immer noch weit verbreitet, obwohl nach meinen Statistiken immer mehr Surfer Java Script in ihrem Browser abstellen und die interne Verlinkung aus Sicht der Suchmaschine damit eine Katastrophe ist.
Letztens besuchte ich eine Seite, die sicherlich mehr als 100 Links im Menü hat und ich musste geduldig warten, bis die ganzen 100 Bildchen der Buttons geladen waren.
Der Webmaster preiste zu meiner Überraschung auch noch suchmaschinenoptimiertes Webdesign auf seiner Website an.
Dieses einschneidende Erlebnis veranlasst mich, eine Lanze zu brechen für Css basierende Menüs und Ihnen in einem kleinen Beispiel die Eleganz von Css-Menüs zu zeigen.
Viele Webmaster erstellen für jeden Menüpunkt ein Image, manchmal sogar mehrere, um die verschiedenen Zustände des Menüs deutlich zu machen (aktuelle Seite, hover,). Sie halten es für richtig, damit auch die von ihnen gewählte Schriftart im Image abgelegt wird.
Selbst in Zeiten von DSL ärgere ich mich jedes Mal über die Borniertheit solcher Webdesigner, die ihren Besuchern unnötig lange Ladezeiten zumuten.
Beispiele, wie man es besser machen kann, gibt es im Web genug.
Wer unbedingt den klassischen Button haben möchte, ist besser beraten, nur ein Image anzufertigen und dieses dann als Background in der entsprechenden Regel in einem Style Sheet abzulegen.
Eine besonders clevere Lösung ist ein Image anzufertigen, das alle drei Zustände des Menüs beinhaltet. Das heißt für die aktive Seite, den normalen Zustand und den, wenn der Mauszeiger über den Menüpunkt fährt. Im Style Sheet wird dann lediglich die Position des Image in der entsprechenden Regel verschoben.
Es ist schnell einzusehen, dass diese Methode nur Vorteile bringt:
- Ein neuer Menüpunkt ist schnell erstellt, es muss kein neues Image angefertigt werden.
- Es müssen keine Images per JavaScript vorgeladen werden, um rechtzeitig auf die verschiedenen Menüzustände zu reagieren.
- Der Quellcode ist wesentlich intuitiver und schneller erstellt.
- Bei vielen Menüpunkten wird die Website deutlich schneller geladen.
- Aus Sicht der Suchmaschinen handelt es sich bei solch einem Menü um ganz normale Textlinks. Sie steigern somit die interne Linkpopularität Ihrer Seite.
Damit Sie sich ein Bild machen können, wie einfach solch ein Menü zu erstellen ist, habe ich ein kleines Beispiel für Sie entworfen. Schauen Sie auch ruhig einmal in den Quelltext, damit Sie sich davon überzeugen können, wie elegant solch ein Menü zu pflegen ist.