Trennzeichen für die Navigation

107

Ich muss Trennzeichen zwischen Navigationselementen hinzufügen. Trennzeichen sind Bilder.

Trennzeichen zwischen Elementen.

Meine HTML-Struktur ist wie folgt : ol > li > a > img.

Hier komme ich zu zwei möglichen Lösungen:

  1. Um weitere liTags für die Trennung hinzuzufügen (boo!),
  2. Fügen Sie ein Trennzeichen in das Bild jedes Elements ein (dies ist besser, aber es besteht die Möglichkeit, dass der Benutzer beispielsweise auf "Startseite" klickt, aber zu "Dienste" gelangt, da diese hintereinander liegen und der Benutzer möglicherweise versehentlich auf das Trennzeichen klickt gehört zu "Services");

Was ist zu tun?

daGrevis
quelle
96
+1 für künstlerische Wiedergabe.
James P.

Antworten:

64

Verwenden Sie einfach das Trennbild als Hintergrundbild auf der li.

Positionieren Sie das Bild links neben dem Listenelement li, nicht jedoch auf dem ersten, damit es nur zwischen Listenelementen angezeigt wird .

Beispielsweise:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

Dieses CSS fügt das Bild jedem Listenelement hinzu, das auf ein anderes Listenelement folgt - mit anderen Worten, alle außer dem ersten.

NB. Beachten Sie, dass der benachbarte Selektor (li + li) in IE6 nicht funktioniert. Sie müssen daher nur das Hintergrundbild zum herkömmlichen li (mit einem bedingten Stylesheet) hinzufügen und möglicherweise einen negativen Rand auf eine der Kanten anwenden.

ajcw
quelle
2
Die Verwendung des :beforePseudo-Selektors verhindert, dass er nach dem letzten Element angezeigt wird.
jrue
3
Schöne Lösung - funktioniert wie ein Zauber - IE6-Unterstützung? Wen interessiert das! :) Wenn wir alle aufhören, ältere Browser zu unterstützen, werden wir die Leute vielleicht zwingen, sie nicht mehr zu benutzen.
Jordanien
Funktioniert wie ein Diagramm mit einem, border-leftum eine vertikale Linie zwischen Elementen zu zeichnen.
Richard-Degenne
132

Wenn es nicht dringend erforderlich ist, Bilder für die Trennzeichen zu verwenden, können Sie dies mit reinem CSS tun.

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

Dies setzt einen Balken zwischen die einzelnen Listenelemente, genau wie das Bild in der ursprünglich beschriebenen Frage. Da wir jedoch die benachbarten Selektoren verwenden , wird der Balken nicht vor dem ersten Element platziert. Und da wir den :beforePseudo-Selektor verwenden, wird am Ende kein Selektor gesetzt.

jrue
quelle
Beeindruckend! Genau das brauchte ich für mein Fußzeilenmenü. Natürlich mit etwas zusätzlichem CSS.
Vladimir
Technisch gesehen könnten Sie immer noch ein Bild verwenden, aber base64 codiert es und speichert das Bild inline. css-tricks.com/data-uris
Commadelimited
@jrue ist es auch möglich, die Position der Separatoren vertikal zu ändern? Es reagiert nicht auf eine obere Polsterung / einen oberen Rand.
Floris
3

Sie können ein liElement hinzufügen , in dem Sie einen Teiler hinzufügen möchten

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

In CSS können Sie folgenden Code hinzufügen.

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

Dies erhöht die Ausführungsgeschwindigkeit, da kein Image geladen wird. teste es einfach aus .. :)

Rajiv Pingale
quelle
Kannst du bitte erklären wie? Aber es gibt immer einen anderen Weg ... CSS3: Wir können get Nth Element hinzufügen und Divider hinzufügen.
Rajiv Pingale
1
Drat, ein Durcheinander, in das ich mich verwickelt habe. Ich habe gerade 30 Minuten damit verbracht, in Standarddokumenten, RWD-Broschüren herumzuwühlen, und sogar verschiedene Bildschirmleser ausprobiert, um meinen Standpunkt zu beweisen. Zumindest die Screenreader sind jedoch klug genug, um nicht laute leere Aufzählungszeichen vorzulesen (und auch keine fehlenden Optionen aufzulisten, wenn @ ol @ anstelle von @ ul @ verwendet wird). Daher kann ich nur darauf hinweisen, dass die Verwendung von @ li @ hier in derselben Kategorie liegt wie die Verwendung einer Tabelle, um ein Spaltenlayout zu erzielen.
Volker Stolz
3

Die andere Lösung ist in Ordnung, aber es ist nicht erforderlich, das letzte Trennzeichen hinzuzufügen, wenn : after verwendet wird, oder ganz am Anfang, wenn Folgendes verwendet wird : before .

SO:

Fall: nach

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

Fall: vorher

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}
T04435
quelle
3

Um das Trennzeichen relativ zum Menütext vertikal zu zentrieren,

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }
user7149870
quelle
2

Fügen Sie das Trennzeichen zum liHintergrund hinzu und stellen Sie sicher, dass der Link nicht erweitert wird, um das Trennzeichen abzudecken. Dies bedeutet, dass das Trennzeichen nicht anklickbar ist.

Soufiane Hassou
quelle
2

Für diejenigen, die Sass verwenden , habe ich zu diesem Zweck ein Mixin geschrieben :

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

Beispiel:

@include addSeparator('li', '|', 1em);

Welches wird Ihnen dies geben:

li+li:before {
  content: "|";
  padding: 0 1em;
}
d4nyll
quelle
Dies zeigt nicht das '|' aus irgendeinem Grund? Irgendein Grund warum nicht?
James111
Keine Sorge, ich habe herausgefunden, wie es geht. Ich musste auch ein: after zum letzten Kind hinzufügen, um den Inhalt des Kindes zu erstellen, das keinen Trennzeichen benötigt = content: ""
James111
2

Ich glaube, die beste Lösung dafür ist das, was ich benutze, und das ist eine natürliche CSS-Grenze:

border-right:1px solid;

Möglicherweise müssen Sie sich um die Polsterung kümmern wie:

padding-left: 5px;
padding-right: 5px;

Wenn Sie nicht möchten, dass das letzte Li diese trennende Grenze hat, geben Sie dem letzten Kind "keine" in "Grenze rechts" wie folgt:

li:last-child{
  border-right:none;
}

Viel Glück :)

Avi
quelle
1

Fügen Sie es als Hintergrund in das Listenelement ein:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

Als nächstes empfehle ich ein anderes Markup für die Barrierefreiheit:
Anstatt die Bilder inline einzubetten, fügen Sie Text als Text ein, umgeben Sie jedes mit einer Spanne, wenden Sie das Bild als Hintergrund an und verbergen Sie den Text mit Anzeige: keine - dies Bietet viel mehr Flexibilität beim Styling und ermöglicht die Verwendung von Kacheln mit einem 1 Pixel breiten Hintergrundbild, spart Bandbreite und kann es in ein CSS-Sprite einbetten, das HTTP-Aufrufe spart:

HTML:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS:

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

UPDATE OK, ich sehe, dass andere eine ähnliche Antwort vor mir erhalten haben - und ich stelle fest, dass John auch ein Mittel enthält, um zu verhindern, dass das Trennzeichen vor dem ersten Element erscheint, indem der li + li-Selektor verwendet wird - was bedeutet, dass jedes li nach dem anderen kommt li.

Faust
quelle
Ja - ich habe das gerade nachgeschlagen und du hast recht. Meine Antwort wurde bearbeitet und ich gebe Ihnen +1, seit Sie geführt haben.
Faust
Vielen Dank. +1 für die Polsterung, die ich vergessen habe hinzuzufügen.
Ajcw