Wie erreichen Sie diese Art von Menü:
Über | Datenschutz | Kontakt | Seitenverzeichnis
… ein durch einen vertikalen Balken getrenntes Menü, aber der erste und der letzte Punkt haben keinen Balken auf der linken und rechten Seite (wie im Beispiel gezeigt)?
Die Menüpunkte werden dynamisch generiert (in WordPress verwendet), nicht manuell.
Danke.
Wenn Sie Listenelemente als Markup für Ihre Navigation verwenden, können Sie eine Linie zwischen jedem Link anzeigen, indem Sie das Trennzeichen als erstellen Hintergrundbild auf der li.
Der Trick, damit es nur zwischen Listenelementen erscheint, besteht darin, das Bild links von zu positionieren li, aber nicht beim ersten. Dieses Beispiel verwendet die daneben Selektor:
#nav li + li {
background:url('seperator.gif') no-repeat top left;
padding-left: 10px
}
Dieses CSS fügt das Bild jedem Listeneintrag hinzu, der auf einen anderen Listeneintrag folgt – also alle bis auf den ersten.
Alternative Sie können das CSS verwenden content Eigentum mit before Pseudo-Klasse anstelle eines Bildes. Der folgende Code fügt eine Pipe vor Ihren Navigationslinks hinzu (wieder unter Verwendung des angrenzenden Selektors).
#nav li + li a:before {
content: "|";
}
Beachten Sie, dass die Inhaltseigenschaft in IE6 und IE7 nicht unterstützt wird und der benachbarte Selektor in IE6 nicht unterstützt wird.
Siehe hier für CSS-Inhalte und Browserkompatibilität – http://www.quirksmode.org/css/contents.html
Ich verstehe, ich werde das zur Kenntnis nehmen. Aber gibt es eine Möglichkeit, dies nicht mit Hintergrundbildern zu tun? Hilft das Vorher- oder Nachher-CSS-Attribut? Ich werde das Menü in einem WordPress-Menü verwenden, sodass Menüelemente dynamisch generiert werden.
– jd377
9. Mai 2011 um 11:53 Uhr
Ich habe die Antwort aktualisiert, um diesen alternativen Ansatz einzubeziehen, obwohl ich persönlich die Verwendung eines Hintergrundbilds flexibler finde.
– ajcw
9. Mai 2011 um 12:11 Uhr
+1 obwohl border-right:solid 1px #000 anstelle background in der ersten CSS-Deklaration kann eine HTTP-Anfrage abschneiden, um den gleichen Effekt zu erzielen, wenn nur ein Pipe-Zeichen oder ein Doppelgänger benötigt wird (ohne die potenziellen Kompatibilitätsprobleme, die durch die zweite Methode entstehen).
– danlefrei
10. Mai 2011 um 3:09 Uhr
Danke, die zweite Methode funktioniert vorerst. Obwohl der vertikale Balken enthalten und “hervorgehoben” ist, wenn der Link mit der Maus bewegt wird, funktioniert die Methode vorerst gut. Werde die Verwendung von Hintergrundbildern später untersuchen.
– jd377
12. Mai 2011 um 4:15 Uhr
Der vertikale Balken ist nur ein Zeichen auf der Tastatur, Sie können ihn also zwischen den Wörtern eingeben.
Vielen Dank. Die Menüpunkte werden jedoch dynamisch generiert (in WordPress verwendet), nicht manuell.
– jd377
9. Mai 2011 um 11:55 Uhr
OK, ich habe diese Informationen wieder in die Frage eingefügt.
– Paulmorriss
10. Mai 2011 um 9:23 Uhr
Eine einfachere Lösung für WordPress gefunden!
Gehen Sie einfach zu Darstellung > Menüs und fügen Sie ” |” hinzu. am Ende des Navigationslabels für jeden Titel des Menüs!!
Ich denke, das geht am besten mit einer CSS-Klasse.
In Aussehen → Menüs:
http://d.pr/i/I9ko+
Fügen Sie Ihrem letzten Menüpunkt eine Klasse „last“ hinzu. Fügen Sie dann in Ihrer style.css Folgendes hinzu:
#nav li.last span {
display: none;
}
