web-dev-qa-db-fra.com

Séparateurs pour la navigation

Je dois ajouter des séparateurs entre les éléments de navigation. Les séparateurs sont des images.

Separators between elements.

Ma structure HTML ressemble à ceci: ol> li> a> img.

J'en viens à deux solutions possibles:

  1. Pour ajouter plus de li tags pour la séparation (boo!),
  2. Inclure un séparateur dans l’image de chaque élément (cela est préférable, mais cela permet à l’utilisateur de cliquer sur, par exemple, "Accueil", mais d’accéder à "Services", car ils sont l'un derrière l'autre et l'utilisateur peut cliquer accidentellement sur un séparateur qui appartient à "Services");

Que faire?

cssnavigationusabilityseparator
106
daGrevis

Utilisez simplement l’image de séparation en tant qu’image d’arrière-plan sur le li.

Pour qu'il n'apparaisse qu'entre les éléments de la liste, positionnez l'image à gauche du li, mais pas sur le premier.

Par exemple:

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

Cette CSS ajoute l'image à chaque élément de la liste qui suit un autre élément de la liste - autrement dit, tous sauf le premier.

NB Sachez que le sélecteur adjacent (li + li) ne fonctionne pas dans IE6, vous devrez simplement ajouter l'image de fond à la li conventionnelle (avec une feuille de style conditionnelle) et éventuellement appliquer une marge négative. à l'un des bords.

63
ajcw

S'il n'est pas absolument nécessaire d'utiliser des images pour les séparateurs, vous pouvez le faire avec du CSS pur.

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

Cela met une barre entre chaque élément de la liste, tout comme l'image dans la question d'origine décrite. Mais comme nous utilisons le sélecteurs adjacents , la barre n'est pas placée avant le premier élément. Et puisque nous utilisons le :before pseudo sélecteur, il n'en met pas un à la fin.

127
jrue

Les autres solutions sont acceptables, mais il n’est pas nécessaire d’ajouter un séparateur à la toute fin si vous utilisez : after ou au tout début si vous utilisez : before.

ALORS:

cas: après

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

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

cas: avant

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

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

Pour centrer le séparateur verticalement par rapport au texte du menu,

.menustyle li + li:before

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

Pour ceux qui utilisent Sass , j'ai écrit un mixin à cette fin:

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

Exemple:

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

Ce qui vous donnera ceci:

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

Vous pouvez ajouter un élément li où vous souhaitez ajouter un diviseur

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

En CSS, vous pouvez ajouter le code suivant.

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

Cela augmentera votre vitesse d'exécution car cela ne chargera aucune image. juste le tester .. :)

2
Rajiv Pingale

Ajoutez le séparateur à l'arrière-plan li et assurez-vous que le lien ne se développe pas pour couvrir le séparateur, ce qui signifie que le séparateur ne pourra pas être cliqué.

2
Soufiane Hassou

Placez-le en tant qu'arrière-plan sur l'élément de liste:

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

Ensuite, je recommande un balisage différent pour l'accessibilité:
Plutôt que d’incorporer les images en ligne, insérez le texte sous forme de texte, entourez-les par une étendue, appliquez-les en tant qu’arrière-plan, puis masquez le texte avec l’affichage: aucun - cela donne beaucoup plus de souplesse de style. , et vous permet d'utiliser le pavage avec une image bg large de 1 px, enregistre la bande passante et vous pouvez l'intégrer dans un sprite CSS, ce qui enregistre les appels 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;}

UPDATE OK, je vois que d'autres personnes ont obtenu une réponse similaire avant moi - et je constate que John inclut également un moyen d'empêcher le séparateur d'apparaître avant le premier élément , en utilisant le sélecteur li + li - ce qui signifie que tout li venant après un autre li.

1
Faust

Je crois que la meilleure solution pour cela est ce que j’utilise, c’est une frontière naturelle en CSS:

border-right:1px solid;

Vous pourriez avoir besoin de vous occuper de rembourrage comme:

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

Enfin, si vous ne voulez pas que la dernière li ait cette frontière séparée, donnez-lui son dernier "aucun" dans "border-right" comme ceci:

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

Bonne chance :)

1
Avi