Séparateurs pour la navigation

107

J'ai besoin d'ajouter des séparateurs entre les éléments de navigation. Les séparateurs sont des images.

Séparateurs entre les éléments.

Ma structure HTML est comme: ol > li > a > img.

J'arrive ici à deux solutions possibles:

  1. Pour ajouter plus de libalises pour la séparation (boo!),
  2. Inclure le séparateur dans l'image de chaque élément (c'est mieux, 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 accidentellement cliquer sur le séparateur qui appartient aux "Services");

Que faire?

daGrevis
la source
96
+1 pour la restitution artistique.
James P.

Réponses:

64

Utilisez simplement l'image de séparation comme image d'arrière-plan sur le li.

Pour qu'elle 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
}

Ce CSS ajoute l'image à chaque élément de liste qui suit un autre élément de liste - en d'autres termes tous sauf le premier.

NB. Soyez conscient du sélecteur adjacent (li + li) ne fonctionne pas dans IE6, vous devrez donc simplement ajouter l'image d'arrière-plan au li conventionnel (avec une feuille de style conditionnelle) et peut-être appliquer une marge négative à l'un des bords.

ajcw
la source
2
L'utilisation du :beforepseudo-sélecteur l'empêche d'apparaître après le dernier élément.
jrue
3
Belle solution-fonctionne comme un charme -IE6 support? On s'en fout! :) Si nous arrêtons tous de prendre en charge les anciens navigateurs, nous forcerons peut-être les gens à cesser de les utiliser.
Jordan
Fonctionne comme un chram avec un border-leftpour dessiner une ligne verticale entre les éléments.
Richard-Degenne
132

S'il n'y a pas un besoin pressant 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 place une barre entre chaque élément de la liste, tout comme l'image de la question d'origine décrite. Mais puisque nous utilisons les sélecteurs adjacents , cela ne place pas la barre avant le premier élément. Et puisque nous utilisons le :beforepseudo-sélecteur, il n'en met pas un à la fin.

jrue
la source
Hou la la! C'est exactement ce dont j'avais besoin pour mon menu de pied de page. Bien sûr avec quelques CSS supplémentaires.
Vladimir
Techniquement, vous pouvez toujours utiliser une image, mais l'encoder en base64 et la stocker en ligne. css-tricks.com/data-uris
limité
@jrue est-il également possible de changer verticalement le positionnement des séparateurs? Il ne répond pas à un remplissage / marge supérieur.
Floris
3

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

<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 il ne chargera aucune image. testez-le simplement .. :)

Rajiv Pingale
la source
pouvez-vous expliquer comment? Mais il y a toujours un autre moyen ... CSS3: Nous pouvons ajouter get Nth Element et y ajouter Divider.
Rajiv Pingale
1
Drat, un désordre dans lequel je me suis mis. Je viens de passer 30 minutes à fouiller dans des documents de normes, des brochures RWD et même essayé différents lecteurs d'écran pour prouver mon point. Cependant, au moins les lecteurs d'écran sont assez intelligents pour NE PAS LIRE DES puces vides FORTES (ni énumérer les options absentes lorsque vous utilisez @ ol @ au lieu de @ ul @). Je peux donc simplement souligner que l'utilisation de @ li @ ici est dans la même catégorie que l'utilisation d'un tableau pour obtenir la disposition des colonnes.
Volker Stolz
3

L'autre solution est OK, mais il n'est pas nécessaire d'ajouter un séparateur à la toute dernière 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: '';
}
T04435
la source
3

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

.menustyle li + li:before

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

Ajoutez le séparateur à l' liarrière - plan et assurez-vous que le lien ne se développe pas pour couvrir le séparateur, ce qui signifie que le séparateur ne sera pas cliquable.

Soufiane Hassou
la source
2

Pour ceux qui utilisent Sass , j'ai écrit un mixin à cet effet:

@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;
}
d4nyll
la source
Cela ne montre pas le '|' pour certaines raisons? Une raison pourquoi pas?
James111
Ne vous inquiétez pas, j'ai compris comment le faire. J'ai également dû ajouter un: after au dernier enfant pour créer le contenu de l'enfant qui n'a pas besoin d'un seperator = content: ""
James111
2

Je pense que la meilleure solution pour cela, c'est ce que j'utilise, et c'est une frontière css naturelle:

border-right:1px solid;

Vous devrez peut-être prendre soin du rembourrage comme:

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

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

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

Bonne chance :)

Avi
la source
1

Mettez-le en 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, mettez du texte sous forme de texte, entourez chacune d'elles avec une étendue, appliquez l'image en arrière-plan le, puis masquez le texte avec affichage: aucun - ceci donne beaucoup plus de flexibilité de style, et vous permet d'utiliser le carrelage avec une image bg de 1px de large, économise de 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;}

MISE À JOUR OK, je vois que d'autres ont obtenu une réponse similaire avant moi - et je note que John inclut également un moyen pour 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 vient après un autre li.

Faust
la source
Oui - je viens de chercher cela, et vous avez raison. Ma réponse est modifiée et je vous donne +1 depuis que vous avez dirigé.
Faust
Merci. +1 pour le rembourrage que j'ai oublié d'ajouter.
ajcw