Sonderzeichen wie ein Menü-Separator mit CSS

Geschrieben am Juni 30, 2010 durch LaszloNoch keine Kommentare

Ich mag zu horizonatal Menü Separator mit CSS nur schaffen, ohne Bild. Ich benutze diese Methode vor allem in der Kopf-oder Fußzeile Menüs. Doch diese Weise war begrenzt, weil ich nur wusste, dass die Grenze nach links oder rechts CSS-Eigenschaften (g. border-left:1px solid # ccc oder border-right:1px solid # ccc) und diese Eigenschaften Orte nur eine ” | ” Trennzeichen in den Menüs. Nicht zu kreativ.

aber – tatatataLaughing – Ich fand eine neue (für mich) CSS-Eigenschaft “Inhalt” und eine neue (für mich) Klassen-Selektor “Wenn:nach”, so kann ich Sonderzeichen in meine Menüs Platz als Menü-Separator jetzt.

Beispiel:

li:after {content:" | "}

Meine Website Menu wurde von den folgenden Parametern erstellt:

# Wenn footermenu:after {content:" > "} # Footermenu li.item81: after {content:" "}

Die erste “Inhalt” Eigenschaft legen “>” Charakter nach alle Menüpunkte in der Fußzeile Menü, der zweite “Inhalt” Eigenschaft löscht den “>” Charakter aus dem letzten (item81) blättern.

Getestet habe ich es in Firefox 3, IE 8, Google Chrome 2.0 und Opera 9.63, es funktioniert gut in allen genannten Browser.

Siehe mein Menü in der Fußzeile.

Tags: , ,

Verwandte Beiträge

Keine verwandten Beiträge.

Lassen Sie eine Antwort

Zusätzliche Kommentare powered by BackType


Visitor Map

Die jüngsten Leser