Mittwoch, 14. Dezember 2011

Drupal: Navigation mit Grafiken

Aufgrund von Webfont-Diensten gibt es immer weniger Gründe, die für die Umsetzung einer Navigation mit Grafiken sprechen – aber dennoch gibt es welche. In unserem Fall bleibt die Navigation statisch und wird frühestens in einem Jahr durch die Agentur geändert, weshalb die Umsetzung nicht variabel sein muss. Der für uns einfachste und schnellste Weg war folgender:


Das Moduls Menu attributes erlaubt die Zuweisung eigener Klassen zu den einzelnen Navigationspunkten, über die mittels CSS Hintergrundgrafiken für die Link-Tags eingesetzt werden:

#navigation ul.menu li a.menupunkt {
    background: url(../Bilder/navigation/menupunkt_0.png) no-repeat;
}

mit der Pseudoklasse :hover lässt sich auch entsprechendes Mouseover integrieren 

#navigation ul.menu li a.menupunkt:hover {
    background: url(../Bilder/navigation/menupunkt_1.png) no-repeat;
}

Bleibt noch ein Problem: Was ist mit dem Text, der ja noch angezeigt wird? Hier hilft ein einfaches text-ident mit hohem negativem Wert, um den Text aus dem sichtbaren Bereich zu schieben.
Jetzt wird mit Sicherheit dem ein oder anderem  "SEO!" schreien. Ich bin aber nach vielen Recherchen zu dem Schluss gekommen, dass diese Methode - dezent, vernünftig eingesetzt - keine negativen Auswirkungen auf das Ranking bei Google hat und völlig legitim ist.

Das Ganze ließe sich jetzt natürlich auch noch automatisieren, z.B. in dem man die ID des Navigationselements ausließt und entsprechend die Hintergrundgrafik mit Javascript setzt.

0 Kommentare:

Kommentar veröffentlichen