it-swarm.dev

Separadores para la navegacion

Necesito añadir separadores entre elementos de navegación. Los separadores son imágenes.

Separators between elements.

Mi estructura HTML es como: ol> li> a> img .

Aquí llego a dos posibles soluciones:

  1. Para agregar más li tags para la separación (¡boo!),
  2. Incluya el separador en la imagen de cada elemento (esto es mejor, pero ofrece la posibilidad de que el usuario haga clic en, por ejemplo, "Inicio", pero acceda a "Servicios", porque están uno detrás del otro y el usuario puede accidentalmente hacer clic en el separador que pertenece a "Servicios");

¿Qué hacer?

106
daGrevis

Simplemente use la imagen separadora como imagen de fondo en la li.

Para que solo aparezca entre los elementos de la lista, coloque la imagen a la izquierda de la li, pero no en la primera.

Por ejemplo:

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

Este CSS agrega la imagen a cada elemento de la lista que sigue a otro elemento de la lista; en otras palabras, todos ellos menos el primero.

NÓTESE BIEN. Tenga en cuenta que el selector adyacente (li + li) no funciona en IE6, por lo que tendrá que agregar la imagen de fondo al li convencional (con una hoja de estilo condicional) y tal vez aplicar un margen negativo a uno de Los bordes.

63
ajcw

Si no hay una necesidad urgente de usar imágenes para los separadores, puede hacer esto con CSS puro.

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

Esto coloca una barra entre cada elemento de la lista, al igual que la imagen en la pregunta original descrita. Pero como estamos usando los selectores adyacentes , no pone la barra antes del primer elemento. Y como estamos usando el pseudo selector :before, no pone uno al final.

126
jrue

La otra solución está bien, pero no es necesario agregar separador al final si se usa: después de o al principio si se usa: antes de .

ASI QUE:

caso: despues

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

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

caso: antes

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

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

Para obtener el separador centrado verticalmente en relación con el texto del menú,

.menustyle li + li:before

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

Para aquellos que usan Sass , he escrito un mixin para este propósito:

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

Ejemplo:

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

Lo que te dará esto:

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

Puede agregar un elemento li donde desee agregar divisor

<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 puedes agregar el siguiente código.

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

Esto aumentará la velocidad de ejecución, ya que no cargará ninguna imagen. solo pruébalo ... :)

2
Rajiv Pingale

Agregue el separador al fondo li y asegúrese de que el enlace no se expanda para cubrir el separador, lo que significa que no se podrá hacer clic en el separador.

2
Soufiane Hassou

Ponlo como fondo en el elemento de 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 */

A continuación, recomiendo un marcado diferente para la accesibilidad:
En lugar de incrustar las imágenes en línea, coloque texto como texto, rodee cada una con un lapso, aplique la imagen como fondo y luego oculte el texto con la pantalla: ninguno: esto le da mucha más flexibilidad de estilo , y te permite usar el mosaico con una imagen bg wide de 1px, ahorra ancho de banda, y puedes incrustarlo en un Sprite CSS, que guarda llamadas 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;}

ACTUALIZACIÓNOK, veo que otras personas obtuvieron una respuesta similar antes que yo, y observo que John también incluye un medio para evitar que el separador aparezca antes del primer elemento, utilizando el selector li + li - que significa cualquier li que viene después de otro li.

1
Faust

Creo que la mejor solución para esto, es lo que uso, y esa es una frontera css natural:

border-right:1px solid;

Es posible que deba cuidar el relleno como:

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

Finalmente, si no quieres que el último li tenga ese borde separado, dale a su último hijo "none" en "border-right" así:

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

Buena suerte :)

1
Avi