Separadores para navegación


107

Necesito agregar separadores entre elementos de navegación. Los separadores son imágenes.

Separadores entre elementos.

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

Aquí llego a dos posibles soluciones:

  1. Para agregar más lietiquetas de separación (¡boo!),
  2. Incluir un separador en la imagen de cada elemento (esto es mejor, pero existe 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 hacer clic accidentalmente en el separador que pertenece a "Servicios");

¿Qué hacer?


96
+1 para interpretación artística.
James P.

Respuestas:


64

Simplemente use la imagen del separador como imagen de fondo en el li.

Para que solo aparezca entre los elementos de la lista, coloque la imagen a la izquierda del liprimero, pero no en el primero.

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 excepto 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 quizás aplicar un margen negativo a uno de los bordes.


2
El uso del :beforepseudo selector evita que aparezca después del último elemento.
Jrue

3
Buena solución -Funciona como un encanto -¿Soporte para IE6? ¡A quien le importa! :) Si todos dejamos de admitir navegadores heredados, tal vez obliguemos a la gente a dejar de usarlos.
Jordan

Funciona como un chram con un border-leftpara dibujar una línea vertical entre los elementos.
Richard-Degenne

132

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

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

Esto coloca una barra entre cada elemento de la lista, tal como se describe en la imagen de la pregunta original. Pero como estamos usando los selectores adyacentes , no coloca la barra antes del primer elemento. Y como estamos usando el :beforepseudo selector, no pone uno al final.


¡Guauu! Esto es exactamente lo que necesitaba para mi menú de pie de página. Por supuesto con algo de CSS adicional.
Vladimir

Técnicamente, aún podría usar una imagen, pero codificarla en base64 y almacenar la imagen en línea. css-tricks.com/data-uris
delimitado por comas

@jrue, ¿también es posible cambiar verticalmente la posición de los separadores? No responde a un margen / relleno superior.
Floris

3

Puede agregar un lielemento 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 puede 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á su velocidad de ejecución ya que no cargará ninguna imagen. solo pruébalo .. :)


¿puedes explicar cómo? Pero siempre hay otra manera ... CSS3: Podemos agregar get Nth Element y agregarle Divider.
Rajiv Pingale

1
Maldita sea, me metí en un lío. Pasé 30 minutos investigando documentos estándar, folletos de RWD e incluso probé diferentes lectores de pantalla para demostrar mi punto. Sin embargo, al menos los lectores de pantalla son lo suficientemente inteligentes como para NO LEER EN VOZ ALTA las viñetas vacías (ni enumerar las opciones ausentes cuando se usa @ ol @ en lugar de @ ul @). Entonces, puedo señalar que el uso de @ li @ aquí está en la misma categoría que usar una tabla para lograr el diseño de la columna.
Volker Stolz

3

La otra solución está bien, pero no es necesario agregar un separador al final si usa : after o al principio si usa : before .

ENTONCES:

caso: después

.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

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

2

Agregue el separador al lifondo 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

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

Esto no muestra el '|' ¿por alguna razón? ¿Alguna razón por la que no?
James111

No se preocupe, descubrí cómo hacerlo. También tuve que agregar un: after al último niño para hacer el contenido del niño que no necesita un separador = contenido: ""
James111

2

Creo que la mejor solución para esto es lo que uso, y ese es un borde css natural:

border-right:1px solid;

Es posible que deba cuidar el acolchado 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

Ponlo como fondo en el elemento de la 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:
lugar de incrustar las imágenes en línea, coloque el texto como texto, rodee cada uno con un intervalo, aplique la imagen como fondo y luego oculte el texto con display: none - this brinda mucha más flexibilidad de estilo y le permite usar el mosaico con una imagen bg de 1px de ancho, ahorra ancho de banda y puede incrustarlo en un sprite CSS, lo que ahorra 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;}

ACTUALIZAR OK, veo que otros obtuvieron una respuesta similar antes que yo, y noto que John también incluye un medio para evitar que el separador aparezca antes del primer elemento, usando el selector li + li, lo que significa que cualquier li viene después de otro li.


Sí, acabo de buscar eso y tienes razón. Mi respuesta está editada y le doy +1 a la suya desde que dirigió.
Fausto

Gracias. +1 para el relleno que olvidé agregar.
ajcw
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.