dynamicinternet Wir machen Ihr Web dynamisch!

Die TwentyEleven Navigation mit Social Icons erweitern

geschrieben von Micha am 03. Dezember 2011 | kein Kommentar

In diesem kleinen Tutorial wollen wir der Navigation unser RSS Feed, einen Link zur Twitterseite und zu unserem Facebook Profil als Icons hinzufügen. Diesmal ohne eine Zeile Code zu schreiben. Die WordPress Menüs bringen alles dafür mit.

Zuerst gehen wir ins Backend zu Design-> Menü und schalten die CSS Klassen an. Dazu klicken wir auf Optionen einblenden und unter Erweiterte Menüeigenschaften anzeigen setzen wir einen Haken bei CSS Klassen und schließen die Optionen wieder.

Anschließend nutzen wir die Links-Box zum Erzeugen der Menüeinträge für Twitter, RSS und Facebook und fügen sie dem Menü hinzu. Dort ergänzen wir die 3 Menüeinträge mit den CSS Klassen. Das RSS Feed bekommt die Klasse rss, Twitter die Klasse twitter und Facebook facebook. Speichern nicht vergessen.

Ich habe eine Sprite vorbereitet, die ihr mit Rechtsklick->Grafik speichern unter… herunterladen könnt. Diese Sprite kommt in das Verzeichnis twentyeleven/images/.

Anschließend öffnen wir die Datei TwentyEleven style.css mit einem Texteditor und suchen die Zeile #access a. Darunter fügen wir unser zusätzliches CSS ein. Viel haben wir nicht zu ergänzen. Wir lassen unsere 3 Listenelemente nach rechts floaten, schieben den Text aus dem sichtbaren Bereich und positionieren die Grafik. Einzig für die hover-, focus- und active states müssen wir eine etwas umständlichere Regel definieren, um die background-gradients von TwentyEleven zu umgehen.

#access .twitter, #access .rss, #access .facebook {
	float: right;
}
#access .twitter a, #access .rss a, #access .facebook a {
	background: transparent url(images/social-sprite.png) 0 0 no-repeat;
	padding: 0;
	text-indent: -9999px;
	width: 70px;
}
#access .rss a { background-position: 0 0; }
#access .facebook a { background-position: 0 -96px; }
#access .twitter a { background-position: 0 -48px; }
#access .rss a:hover, #access .rss a:focus, #access .rss a:active {
	background: transparent url(images/social-sprite.png) 0 -144px no-repeat;
}
#access .twitter a:hover, #access .twitter a:focus, #access .twitter a:active {
	background: transparent url(images/social-sprite.png) 0 -192px no-repeat;
}
#access .facebook a:hover, #access .facebook a:focus, #access .facebook a:active {
	background: transparent url(images/social-sprite.png) 0 -240px no-repeat;
}