Separatori per la navigazione


107

Devo aggiungere separatori tra gli elementi di navigazione. I separatori sono immagini.

Separatori tra gli elementi.

La mia struttura HTML è come: ol > li > a > img.

Qui vengo a due possibili soluzioni:

  1. Per aggiungere più litag per la separazione (boo!),
  2. Includi separatore nell'immagine di ogni elemento (questo è meglio, ma dà la possibilità che l'utente possa fare clic, ad esempio, su "Home", ma accedere a "Servizi", perché sono uno dietro l'altro e l'utente può accidentalmente fare clic sul separatore che appartiene a "Servizi");

Cosa fare?


96
+1 per la resa artistica.
James P.

Risposte:


64

Usa semplicemente l'immagine del separatore come immagine di sfondo sul file li.

Per fare in modo che appaia solo tra gli elementi dell'elenco, posiziona l'immagine a sinistra di li, ma non sul primo.

Per esempio:

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

Questo CSS aggiunge l'immagine a ogni elemento dell'elenco che segue un altro elemento dell'elenco, in altre parole tutti tranne il primo.

NB. Tieni presente che il selettore adiacente (li + li) non funziona in IE6, quindi dovrai semplicemente aggiungere l'immagine di sfondo al li convenzionale (con un foglio di stile condizionale) e forse applicare un margine negativo a uno dei bordi.


2
L'uso dello :beforepseudo selettore impedisce che appaia dopo l'ultimo elemento.
jrue

3
Bella soluzione - Funziona come un fascino - Supporto I6? Che importa! :) Se smettiamo tutti di supportare i browser legacy, forse costringeremo le persone a smettere di usarli.
Jordan

Funziona come un chram con a border-leftper tracciare una linea verticale tra gli elementi.
Richard-Degenne

132

Se non è necessario utilizzare immagini per i separatori, puoi farlo con CSS puro.

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

Questo inserisce una barra tra ogni elemento dell'elenco, proprio come l'immagine nella domanda originale descritta. Ma poiché stiamo usando i selettori adiacenti , non mette la barra prima del primo elemento. E poiché stiamo usando lo :beforepseudo selettore, non ne mette uno alla fine.


Wow! Questo è esattamente ciò di cui avevo bisogno per il mio menu a piè di pagina. Ovviamente con alcuni CSS aggiuntivi.
Vladimir

Tecnicamente potresti ancora usare un'immagine, ma base64 codificala e memorizza l'immagine in linea. css-tricks.com/data-uris
commadelimited

@jrue è anche possibile cambiare verticalmente il posizionamento dei separatori? Non risponde a un riempimento / margine superiore.
Floris

3

Puoi aggiungere un lielemento in cui desideri aggiungere un divisore

<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 puoi aggiungere il seguente codice.

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

Ciò aumenterà la velocità di esecuzione poiché non caricherà alcuna immagine. provalo e basta .. :)


puoi spiegare come? Ma c'è sempre un altro modo ... CSS3: Possiamo aggiungere get Nth Element e aggiungere Divider ad esso.
Rajiv Pingale

1
Drat, qualche pasticcio in cui mi sono cacciato. Ho appena trascorso 30 minuti a fare il tifo in documenti standard, opuscoli RWD e persino provato diversi lettori di schermo per dimostrare il mio punto. Tuttavia, almeno le utilità per la lettura dello schermo sono abbastanza intelligenti da NON LEGGERE FORTEMENTE proiettili vuoti (né enumerare le opzioni assenti quando si usa @ ol @ invece di @ ul @). Quindi posso solo sottolineare che l'uso di @ li @ qui è nella stessa categoria dell'uso di una tabella per ottenere il layout delle colonne.
Volker Stolz

3

L'altra soluzione va bene, ma non è necessario aggiungere il separatore all'ultimo se si usa : dopo o all'inizio se si usa : prima .

COSÌ:

caso: dopo

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

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

caso: prima

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

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

3

Per ottenere il separatore centrato verticalmente rispetto al testo del menu,

.menustyle li + li:before

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

2

Aggiungi il separatore allo lisfondo e assicurati che il collegamento non si espanda per coprire il separatore, il che significa che il separatore non sarà selezionabile.


2

Per coloro che usano Sass , ho scritto un mixin a questo scopo:

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

Esempio:

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

Che ti darà questo:

li+li:before {
  content: "|";
  padding: 0 1em;
}

Questo non mostra il '|' per qualche ragione? Qualche motivo perché no?
James111

Non preoccuparti, ho capito come farlo. Ho anche dovuto aggiungere un: dopo all'ultimo figlio per rendere il contenuto del bambino che non ha bisogno di un separatore = contenuto: ""
James111

2

Credo che la soluzione migliore per questo sia ciò che uso, e questo è un confine CSS naturale:

border-right:1px solid;

Potrebbe essere necessario occuparsi di imbottitura come:

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

Infine, se non vuoi che l'ultimo li abbia quel bordo di separazione, dai al suo ultimo figlio "nessuno" in "bordo destro" in questo modo:

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

In bocca al lupo :)


1

Mettilo come sfondo sull'elemento della lista:

<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 */

Successivamente, consiglio un markup diverso per l'accessibilità:
invece di incorporare le immagini in linea, inserisci il testo come testo, racchiudi ciascuna di esse con un intervallo, applica l'immagine come sfondo e quindi nascondi il testo con display: nessuno - questo offre molta più flessibilità di stile e ti consente di utilizzare il tiling con un'immagine bg larga 1px, risparmia larghezza di banda e puoi incorporarlo in uno sprite CSS, che salva le chiamate HTTP:

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;}

AGGIORNAMENTO OK, vedo che altri hanno ricevuto una risposta simile prima di me - e noto che John include anche un mezzo per impedire che il separatore appaia prima del primo elemento, utilizzando il selettore li + li - che significa qualsiasi li che viene dopo l'altro li.


Sì, l'ho appena cercato e hai ragione. La mia risposta è stata modificata e ti do +1 da quando hai guidato.
Faust

Grazie. +1 per l'imbottitura che ho dimenticato di aggiungere.
ajcw
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.