Hoy vamos a ver como crear un menú horizontal con listas. Hay muchos tutoriales en Internet donde viene explicado como hacer esto, pero aquí lo vamos a explicar paso a paso.
Lo primero que vamos a hacer va a ser crear nuestro menú con una lista no ordenada:
<ul id="menu"> <li><a href="#">Inicio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contacto</a></li> <li><a href="#">Sobre el Autor</a></li> </ul>
Ahora vamos a aplicar los estilos. Para ello vamos a eliminar la viñeta por defecto (list-style: none) y vamos a hacer que los elementos floten a la izquierda, para que salga en horizontal. También le vamos a dar un borde para decorar y vamos a cambiar el color de fondo de los enlaces al pasar sobre ellos. Veamos el código CSS:
ul#menu {
list-style: none;
float: left;
width: 900px;
margin: 0;
padding: 0;
background: #f0f0f0;
border: 1px solid #ddd;
}
ul#menu li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid #ddd;
}
ul#menu li a {
float: left;
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
ul#menu li a:hover {
background: #333;
color: #f0f0f0;
}
De esta forma obtenemos un menú como el de la imagen:
Con unas pocas modificaciones podemos hacer que tenga el aspecto de pestañas:
ul#menu {
list-style: none;
float: left;
width: 900px;
margin: 0;
padding: 0;
border-bottom: 1px solid #ddd;
}
ul#menu li {
float: left;
margin: 0;
padding: 0;
border: 1px solid #ddd;
}
ul#menu li a {
float: left;
display: block;
padding: 10px;
color: #333;
background: #f0f0f0;
text-decoration: none;
}
ul#menu li a:hover {
background: #333;
color: #f0f0f0;
}
Y nos quedaría como la siguiente imagen:
Con esto finaliza esta parte sobre las listas y CSS. En la próxima entrega volveremos con las listas, para ver como podemos crear unas listas con más estilo.
Artículos relacionados:
