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.