¿Cómo crear un menú separado por una barra pero el primer y el último elemento no tienen barra?

3 minutos de lectura

¿Cómo se logra este tipo de menú?

Acerca de | Privacidad | Contacto | Mapa del sitio

… un menú separado por una barra vertical, pero el primer y último elemento no tienen una barra en los lados izquierdo y derecho (como se muestra en el ejemplo)?

Los elementos del menú se generan dinámicamente (usados ​​en wordpress), no manualmente.

Gracias.

Si está utilizando elementos de la lista como marca para su navegación, puede mostrar una línea entre cada enlace creando el separador como un imagen de fondo sobre el li.

El truco para que solo aparezca entre los elementos de la lista es colocar la imagen a la izquierda de la li, pero no en el primero. Este ejemplo utiliza el selector adyacente:

#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 menos el primero.

Alternativamente puedes usar el css content propiedad con la before pseudo clase, en lugar de una imagen. El siguiente código agrega una canalización antes de los enlaces de navegación (nuevamente usando el selector adyacente).

#nav li + li a:before {
    content: "|";
}

Tenga en cuenta que la propiedad de contenido no es compatible con IE6 e IE7, y el selector adyacente no es compatible con IE6.

Consulte aquí los contenidos CSS y la compatibilidad del navegador: http://www.modoquirks.org/css/contents.html

  • Ya veo, tomaré nota de esto. Pero, ¿hay alguna forma de no hacer esto usando imágenes de fondo? ¿Ayuda el atributo css anterior o posterior? Voy a usar el menú en un menú de wordpress, por lo que los elementos del menú se generan dinámicamente.

    jd377

    9 de mayo de 2011 a las 11:53

  • Actualicé la respuesta para incluir este enfoque alternativo, aunque personalmente encuentro que usar una imagen de fondo es más flexible.

    – ajcw

    9 de mayo de 2011 a las 12:11

  • +1 aunque border-right:solid 1px #000 en lugar de background en la primera declaración de CSS puede eliminar una solicitud HTTP para lograr el mismo efecto si todo lo que se necesita es un carácter de tubería o similar (sin los posibles problemas de compatibilidad planteados por el segundo método)

    – danlefree

    10 de mayo de 2011 a las 3:09

  • Gracias, el segundo método funciona por ahora. Aunque la barra vertical está incluida y “resaltada” cuando se desplaza el enlace, el método funciona bien por ahora. Explorará el uso de imágenes de fondo más adelante.

    jd377

    12 de mayo de 2011 a las 4:15

La barra vertical es solo un carácter en el teclado, por lo que puede escribirlo entre las palabras.

  • Gracias. Sin embargo, los elementos del menú se generan dinámicamente (usados ​​en wordpress), no manualmente.

    jd377

    9 de mayo de 2011 a las 11:55

  • OK, he vuelto a poner esa información en la pregunta.

    – Paul Morriss

    10 de mayo de 2011 a las 9:23

¡Encontré una solución más fácil para wordpress!

Simplemente vaya a Apariencia>Menús y agregue ” |” al final de la etiqueta de navegación para cada título del menú!!

Creo que la mejor manera de hacer esto es con una clase CSS.

En Apariencia → Menús:
http://d.pr/i/I9ko+

  1. Haga clic en Opciones de pantalla
  2. Comprobar clases de CSS
  3. Agregue una clase de “último” a su último elemento de menú. Luego, en su estilo.css, agregue:

    #nav li.last span {
    display: none;
    }

¿Ha sido útil esta solución?