Crear un menú simple separando los elementos con una barra
En este artículo vamos a explicar detalladamente como crear un menú simple separando los elementos del menú con una barra e indicando que el último elemento de la lista no disponga de dicha barra.
Se hace especial y necesario cuando creamos menús dinámicos que obtienen sus elementos de la base de datos y no sabemos cuantos elementos hay en la lista.
La barra que separa los elementos la vamos a añadir utilizando las técnicas CSS y el último elemento de la lista no la contendrá.
Como vemos, el menú que ilustramos tiene tan solo 3 elementos donde el último; «Contacto» no dispone de la barra separatoria.
Dentro del <body> vamos a tener un código muy simple:
<ul class="menu"> <li class="current"><a href="#">Inicio</a></li> <li class=""><a href="#">Proyectos</a></li> <li class=""><a href="#">Contacto</a></li> </ul>
En nuestro <head> deberemos incluir las siguientes clases CSS:
.menu {
float: left;
margin-top: 10px;
width: 750px;
}
.menu li {
border-right: 1px solid #9B9A9A;
float: left;
list-style: none outside none;
padding-left: 5px;
padding-right: 5px;
width: auto;
}
.menu li:last-child {
border-right:none;
}
.menu li a {
color: #000000;
text-decoration: none;
}
.menu li a:hover {
color: #9B9A9A;
text-decoration: none;
}
.menu .current a {
color: #9B9A9A;
text-decoration: none;
}
.menu .current a:hover {
color: #000000;
text-decoration: none;
}
Donde la clave del asunto o el origen de este artículo recae en la siguiente clase del código:
.menu li:last-child {
border-right:none;
}
Donde le estamos indicando al documento que al último elemento de la lista no le añada el borde derecho de un pixel como dispone el resto de elementos.
Autor
¿Buscas trabajo de programador?
Una respuesta a “Crear un menú simple separando los elementos con una barra”
Deja una respuesta
Muchas gracias por la ayuda, se aprecia demasiado.