Maquetación de páginas web: crear un menu horizontal con CSS
(4 votos, promedio: 3,50 de 5)
Cargando...Hay varias formas de presentar un menú de navegación en una página web. En este artículo, presentamos la forma de hacer un menú horizontal realizado con una lista flotante.
Los menús son una parte importante del diseño de una página web, debido a que colabora en gran medida en la usabilidad de la página.
Toda página web debe contar con al menos un menú que permita a los usuarios desplazarse por las diferentes páginas en forma ágil y sencilla.
Los menús pueden ubicarse en varios puntos de la página, aunque los más usados son debajo de la cabecera, encima de la misma, y en una columna lateral, preferentemente a la izquierda.
En LaWebera.es se ha explicado anteriormente como hacer distintos tipos de menús, puedes consultar los artículos:
- Menús y submenús con CSS, menú desplegable con CSS y menu desplegable con XHTML y CSS.
- Menú rollover con CSS y una sola imagen.
Preparación
A continuación, desarrollaremos un menú ubicado encima de la cabecera de la página. Para seguir los ejemplos, deberán contar con un pack de imágenes, que podrán descargar desde aquí.
Vista del ejemplo terminado
Para que vean el ejemplo que vamos a realizar aquí tienen una captura de imágen del resultado final:
Y para verlo en acción pueden pinchar aquí: menú horizontal con CSS.
Creando la estructura del documento HTML
En primer lugar, estableceremos la estructura de los archivos que emplearemos. El ejemplo será realizado en una página que llamaremos “index.html” y que desarrollaremos en XHTML 1.1. Este archivo se encontrará en la raíz del sitio, junto a dos directorios que llamaremos “archivos” e “imagenes”. En el primero colocaremos un archivo CSS que denominaremos “estilo.css”, mientras que el segundo es el mismo directorio que descargaron en el archivo comprimido.
Así que en el encabezado del documento html, colocaremos las siguientes líneas:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" > <head> <title>Página de ejemplo</title> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Language" content="Español" /> <link rel="stylesheet" type="text/css" href="archivos/estilo.css" /> </head> <body>
Como se puede ver, se ha colocado el link que vincula la página con un archivo CSS que está ubicado en un directorio “archivos”, el cual deberemos crear y colocar en su interior el mencionado archivo.
Comenzando con la elaboración del sitio, en primer lugar ubicaremos una capa contenedora (<div>) de 900px y la centraremos.
Menú superior
A los efectos de comprender como se construye un menú sencillo maquetado con HTML y CSS tiene poca relevancia si el mismo se encuentra ubicado encima del encabezado o por debajo de este, por lo que lo ubicaremos debajo del encabezado y diremos que para que quede por encima del encabezado, bastará con ubicar las líneas de código del menú por encima de las del encabezado.
Así que en el caso del ejemplo, comenzaremos por ubicar el encabezado y darle los formatos a cada uno de sus componentes. El código HTML será el siguiente:
<div id="contenedor"> <div id="cabecera"> <h1>Página de ejemplo</h1> </div> </div>
Y el código que habremos colocado hasta el momento en el archivo CSS, será el siguiente:
body {
margin: 0;
padding: 0;
font: normal 13px arial, helvetica, sans-serif;
}
#contenedor {
margin: 0 auto;
border: solid 1px #aaa;
}
#cabecera {
height: 120px;
background: url(../imagenes/fondo1.jpg);
}
#cabecera h1 {
margin: 0;
padding: 25px;
font: bold 50px arial, helvetica, sans-serif;
color: white;
}
Aquí vemos que en primera instancia hemos cambiado las características de la página por defecto, eliminando los márgenes y rellenos, así como modificando la fuente. El segundo párrafo contiene las características del contenedor. Los párrafos tres y cuatro, contienen las características de la cabecera y el título de la página.
Fondo del menú horizontal
En primer lugar, se debe establecer una capa contenedora de todos los botones del menú, que además sirve para establecer el fondo gráfico del menú, es decir, que es la capa que dará la apariencia de una barra horizontal que ocupará todo el ancho de la página. Para ello, luego de la etiqueta de cierre de la capa de la cabecera de la página, se colocará esta capa que corresponde el identificador “menu”.
En el archivo CSS solo se establecen dos propiedades, la altura de la capa y el fondo. Como la altura de la imagen de fondo coincide con la altura de la capa, no es necesario especificar el tipo de repetición que lleva la imagen.
Luego, colocaremos una nueva capa embebida en la anterior, que tiene la misma altura, pero que en lugar de ocupar todo el ancho de la capa contenedora, solo tendrá un ancho de 481px. A primera vista, tiene unas dimensiones un poco extrañas, pero más adelante veremos por qué se establece esta medida. Esta capa, tiene como fondo una imagen similar a la del fondo del menú, pero más clara. La finalidad de esta capa, es hacer de fondo en la separación que dejaremos entre los botones, lo que simulará un separador más claro, como ya veremos.
Esta nueva capa está marcada en el archivo CSS como “#fondomenu”. A continuación, mostraremos las líneas del archivo CSS a las que nos hemos referido:
#menu {
background: url(../imagenes/boton-menu.jpg);
height: 30px;
}
#fondomenu {
background: url(../imagenes/boton-menu3.jpg);
width: 485px;
height: 30px;
}
<div id="contenedor"> <div id="cabecera"> <h1>Página de ejemplo</h1> </div> <div id="menu"> <div id="fondomenu"> </div> </div> </div>
Colocando los botones del menu
Los botones son elementos de lista, que en este caso, tienen una extensión de 120px de ancho por 30px de altura. A estos botones, les daremos un margen izquierdo de 1px, con lo que aparecerá el fondo del menú, formado por una imagen más clara que la de los botones, por lo que este margen simulará la presencia de un divisor.
Es por esta razón que se ha tomado el ancho de la capa del fondo de 481px. La operación que hemos realizado es la siguiente: Si tenemos 4 botones de 120px, a los que les dejamos un margen de 1px a la izquierda, a lo que debemos sumar 1px más para que quede un espacio más claro al final del último botón, nos queda:
(4 x 120px) + (4 x 1px) + 1px = 485px
Para que los botones queden alineados uno al costado del otro, debemos agregar la propiedad “float” y darle el valor “left”. Ahora, debemos agregar un detalle a este menú, que es opcional, que es la posibilidad de que los botones cambien de color cuando el puntero pase por encima de ellos. Para ello, bastará con colocar la pseudo-clase :hover a la clase de los botones, modificando solo la imagen de fondo.
Teniendo en cuenta todo lo que hemos expresado, los códigos quedarían de la siguiente forma:
<div id="contenedor"> <div id="cabecera"> <h1>Página de ejemplo</h1> </div> <div id="menu"> <div id="fondomenu"> <ul> <li><a href="#">Item uno</a></li> <li><a href="#">Item dos</a></li> <li><a href="#">Item tres</a></li> <li><a href="#">Item cuatro</a></li> </ul> </div> </div> </div>
#fondomenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#fondomenu ul li a {
background: url(../imagenes/boton-menu.jpg);
width: 120px;
height: 30px;
margin-left: 1px;
float: left;
text-align: center;
line-height: 30px;
font-size: 13px;
color: white;
text-decoration: none;
display: block;
}
#fondomenu ul li a:hover {
background: url(../imagenes/boton-menu2.jpg);
color: black;
}
También modificamos algunas de las propiedades del texto, ubicándolo en el centro del botón mediante “text-align” y “line-height”, con lo que determinamos que la línea de texto tendrá una altura igual que la de la totalidad de la capa. Ahora restan los elementos de texto y hacer que los botones se modifiquen cuando el puntero pasa por encima de ellos, para darle un aspecto más agradable.
Los últimos detalles para crear el menu horizontal
El texto de los botones, por ser links, tienen un color azul, están subrayados y ubicados en la parte superior del botón. Para darle la vista final a los botones, deberemos modificar las propiedades del texto enlazado ubicado dentro de estos botones.
En los últimos dos párrafos del código CSS, le hemos dado el color blanco al texto enlazado y otro fondo al botón cuando el puntero pasa por encima de él. Esto último requiere una explicación. En primer lugar, agregando la propiedad “display: block”, hemos conseguido que señalando en cualquier parte del botón, el puntero cambie y podamos hacer clic como si estuviéramos haciéndolo sobre el texto.
Luego, al modificar el valor de la propiedad “background”, conseguimos que al pasar el puntero por cualquier parte de los botones, estos cambien la imagen de fondo, produciéndose el cambio de color.
Códigos completos del menu horizontal con CSS
HTML
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" > <head> <title>Página de ejemplo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Language" content="Español" /> <link rel="stylesheet" type="text/css" href="archivos/estilo.css" /> </head> <body> <div id="contenedor"> <div id="cabecera"> <h1>Página de ejemplo</h1> </div> <div id="menu"> <div id="fondomenu"> <ul> <li><a href="#">Item uno</a></li> <li><a href="#">Item dos</a></li> <li><a href="#">Item tres</a></li> <li><a href="#">Item cuatro</a></li> </ul> </div> </div> </div> </body> </html>
Código del archivo CSS
body {
margin: 0;
padding: 0;
font: normal 13px arial, helvetica, sans-serif;
background: url(../imagenes/fondo.jpg) repeat-x;
}
#contenedor {
margin: 0 auto;
width: 900px;
}
#cabecera {
height: 120px;
background: url(../imagenes/fondo1.jpg);
}
#cabecera h1 {
margin: 0;
padding: 25px;
font: bold 50px arial, helvetica, sans-serif;
color: white;
}
#menu {
background: url(../imagenes/boton-menu.jpg);
height: 30px;
}
#fondomenu {
background: url(../imagenes/boton-menu3.jpg);
width: 485px;
height: 30px;
}
#fondomenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#fondomenu ul li a {
background: url(../imagenes/boton-menu.jpg);
width: 120px;
height: 30px;
margin-left: 1px;
float: left;
text-align: center;
line-height: 30px;
font-size: 13px;
color: white;
text-decoration: none;
display: block;
}
#fondomenu ul li a:hover {
background: url(../imagenes/boton-menu2.jpg);
color: black;
}
11 respuestas
Bueno.. me respondo yo mismo. he encontrado como centralizar el menu cuando se usa float.
http://www.cristalab.com/tutoriales/centrar-menu-de-ancho-variable-con-css-c104838l/
un saludo
Este tutorial me ha resuelto una duda pero me he encontrado con otra. Como se puede centralizar el menu? si os fijais en el link del ejemplo no lo esta.
Un saludo
mi pregunta es como puedo añadir imagenes al menu
aja y si quiero que la ul sea mas ancho que el Li ¿? tengo que meterlo en un DIV aparte??
Excelente artículo, justo lo que necesito para mi primer proyecto web. A partir de ahora me hago seguidor de esta web. Magnífico, felicidades!
me ayudó muchisimo muchas gracias
Hola, acabo de ver el tutorial, por que tengo un problema en una web, que no puedo resolver, soy nuevo en esto, y probé el link de ejemplo del menú horizontal con css, tiene el mismo defecto que el que tiene mi sitio, la lista se cae hacia la derecha, (cuando lo ves en IE 7, en chrome, ni en firefox) tienen idea como solucionar ese problema?
Espero puedan ayudarme, ahí dejé mi mail, desde ya muchas gracias, y saludos.
Hola Danny:
En primer lugar, convengamos en que el código es correcto, y que el problema es que Internet Explorer 7, a pesar de presentar avances respecto de Internet Explorer 6, aún no interpreta correctamente las reglas CSS.
Este problema de Internet Explorer 7 es frecuente, y tiene una solución sencilla. En primer lugar, debes crear un archivo CSS específico para este navegador, al cual puedes denominar, por ejemplo, ie7.css. Luego, en el HTML debes crear el enlace que solo sea leído por los navegadores de Microsoft, colocándolo como comentario en el head y con condicionales, de forma que solo el navegador IE7 lo lea.
En este archivo, deberías colocar la siguiente línea de código:
#fondomenu ul li { display: inline; }De esta forma, los elementos flotantes se sustituyen por elementos en línea, pero manteniendo el resto del formato que está dado por el archivo CSS principal.
Espero que te sea de utilidad. Saludos
Carlos, totalmente de acuerdo. Le acabo de hacer llega a Andrés tu mensaje para que corrija el tema.
Gracias por el aporte.
Saludos.
Buenos días,
Si me permites hacerte una recomendación y ya que estos artículos los lee mucha gente para aprender a hacer bien las cosas, recomendaría que en el ejemplo el menú lo estructurases como una lista en lugar de emplear un DIV para cada botón. De este modo se aumenta la carga semántica del menú de navegación.
Saludos
Hola Carlos:
En primer lugar, quiero agradecerte el comentario, que es absolutamente atinado. Ya he hecho las modificaciones que corresponden, generando el menú con elementos de lista.