In diesem Tutorial zeige ich, wie man einem Menüpunkt ein Label hinzufügen kann. Das ganze geht allein per CSS und ist mit ein paar Zeilen Code erledigt. Keine Sorge: Der Spaß ist nicht kompliziert.
Unser Ziel
Das Ziel ist in diesem Fall das kleine Label „Neu“, welches ich einem Menüpunkt per CSS hinzufügen möchte.
CSS im Menü aktivieren
Im ersten Schritt müssen wir die Option CSS in unserem Menü aktiveren. Gehe zu
- DESIGN > MENÜS > ANSICHT ANPASSEN (oben rechts)
- Aktiviere: Erweiterte Menüeigenschaften anzeigen > CSS-Klassen
CSS-Class dem Menüpunkt hinzufügen
Im nächsten Schritt fügen wir dem Menüpunkt, der ein Label bekommen soll, eine Klasse hinzu. Der Name ist bis jetzt beliebig. Es sollte aber ein Wort ohne Sonderzeichen oder Umlaute sein. Ich nenne den Punkt: menulabel
CSS festlegen
Im letzten Schritt müssen wir nur noch festlegen, wie das Label ausschauen soll.
.menulabel a:before: Der Name der Klasse und die Ausgabe vor dem Link.
content: „Dein Text“: Der gezeigte Text.
font-size: 0.8em: Die Schriftgröße (hier 80% der Standardschrift.
color: #fff: Die Farbe der Schrift.
background-color: #000: Die Farbe vom Hintergrund.
position: absolute: Die Position.
padding: 2px 5px: Der Abstand Schrift zu Rand oben/unten und links/rechts
right: 0px: Der äußere Abstand rechts.
top: -20px: Der äußere Abstand oben.
Das sieht dann alles in allem so aus:
.menulabel a:before {
content: "NEU";
font-size: 0.8em;
color: #fff;
background-color: #E75151;
position: absolute;
padding: 2px 5px;
right: 0px;
top: -20px;
}
Fertig :-)
