¿Como crear un menú horizontal en HTML y CSS utilizando listas desordenadas?
Utilizar elementos de HTML para crear algo no es complicado, sin embargo hacerlo de manera eficiente puede parecer que complica un poco el asunto pero nada más lejos de la realidad, en esta tutoría vamos a ver como crear un menú horizontal utilizando meramente HTML y CSS, más en concreto vamos a formatear una lista desordenada para que sirva como menú horizontal.
El HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Menú Horizontal Utilizando HTML y CSS</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<ul id="menu-horizontal">
<li><a href="">Item 01</a></li>
<li><a href="">Item 02</a></li>
<li><a href="">Item 03</a></li>
<li><a href="">Item 04</a></li>
<li><a href="">Item 05</a></li>
</ul>
</body>
</html>
Figura 1.1 index.html
No hay grandes sorpresas, es una simple lista desordenada, ¿pero por qué utilizar una lista desordenada?, bueno HTML es un lenguaje de etiquetas que nos sirve para darle semántica (significado) a un documento para publicarlo, esto hace que tenga más sentido usar una lista por la simple razón de que un menú horizontal es en si una lista que se despliega de manera horizontal.
Paso a paso
Lo primero que vamos a hacer es quitarle a la lista la mayoría del estilo que le da el navegador por defecto:
Los Bullets, los margenes (margin) y el relleno (padding).
/*Este es un archivo CSS que he puesto al mismo nivel que el documento
index.html y se llama estilo.css*/
#menu-horizontal{
list-style: none; /*Elimina el bullet de la lista*/
margin: 0; /*Sobre escribe los margenes de la lista a 0*/
padding: 0; /*Sobre escribe el relleno de la lista a 0*/
}
Figura 2.1 index.html
Aunque no lo pareciera llevamos más de la mitad del camino, así que seguiremos adelante con el siguiente paso:
Hacer que los items de la lista se desplieguen de manera horizontal.
...
#menu-horizontal li{
float: left; /*modifica el flujo de la lista*/
}
Figura 2.2 index.html
Nada complicado hasta el momento, ahora vamos a darle un poco de formato a los enlaces para que parecieran botones:
...
#menu-horizontal a{
display: block; /*cambia el display original de los enlaces de
inline a block esto con el fin de aplicarle
algunas propiedades que solo se pueden
aplicar a las cajas*/
color: #fff; /*cambia el color del texto del enlace a blanco*/
text-decoration: none; /*elimina el subrayado del enlace*/
text-align: center; /*centramos el texto de los enlaces*/
font-family: sans-serif; /*cambiamos la fuente*/
font-size: 12px; /*cambiamos el tamaño de la fuente*/
width: 75px; /*le damos un ancho de 75px a cada enlace*/
height: 25px; /*le damos un alto de 25px a cada enlace*/
background: #627aad;/*cambiamos el color de fondo*/
padding-top: 8px; /*le agregamos este pequeño relleno*/
}
/*La siguiente regla es para controlar el comportamiento
del enlace cuando el usuario pase el ratón sobre los botones*/
#menu-horizontal a:hover{
background: #6d86b7;/*cambiamos el color de fondo*/
}
Figura 2.3 index.html
Eso es todo, en 3 simples pasos hemos convertido una lista desordenada en una botonera horizontal, sería cosa de que siguieran experimentando, por ejemplo remplazar el texto por imágenes (que por cierto si no saben como hacerlo ese será el siguiente tema de mi próxima tutoría)
/*Aquí la versión final del archivo CSS*/
#menu-horizontal{
list-style: none;
margin: 0;
padding: 0;
}
#menu-horizontal li{
float: left;
}
#menu-horizontal a{
display: block;
color: #fff;
text-decoration: none;
text-align: center;
font-family: sans-serif;
font-size: 12px;
width: 75px;
height: 25px;
background: #627aad;
padding-top: 8px;
}
#menu-horizontal a:hover{
background: #6d86b7;
}
En fin, les dejo los archivos y el Live Demo para que lo revisen.
El mejor agradecimiento es el que allás leído este post, si tienes alguna pregunta no te quedes sin más, has un comentario.