CSSLab

Menú horizontal y algo +

Debido al pedido del público fiel lector de CSSLab, me puse las pilas y anoto un artículo más con una vieja pero nunca mal ponderada técnica para construir menús de listas horizontal (usando <ul> y <li>), pero en esta oportunidad le agregaremos un rollover, ya q he recibido la inquietud de parte de Bane de cómo aplicar el artículo anterior ‘Rápidos rollovers con CSS‘ en este tipo de despliegue. Vayamos al grano:

Lo primero es lo primero: creamos el menú con 1 <div>, 1 <ul> y varios <li>’s:

<div id="menu">
<ul>
<li><a href="#">M&aacute;s Izquierda</a></li>
<li><a href="#">Izquierda</a></li>
<li><a href="#">Derecha</a></li>
<li><a href="#">M&aacute;s derecha</a></li>
</ul>
</div>

Le vamos a dar color y forma a esto. Agregando estilo al #menu:

#menu ul {
padding: 0px;
margin: 0px;
background-color: #333;
list-style: none;
font-size: 14px;
font-weight: bold;
width: 100%;
height: 30px;
float: left;
}

y el punto clave: horizontalizando a través de display: inline;

#menu ul li {
display: inline;
}

Hasta aquí, nada fuera de lo común. Nos falta agregar algo bonito para que se vea bien en un rollover, algo simple. Un cambio de color:

#menu ul li a:link, #menu ul li a:visited {
background-color: #333;
color: #FFF;
padding: 5px 15px;
float: left;
text-decoration: none;
}

#menu ul li a:hover, #menu ul li a:active{
color: #F30;
background-color: #CCC;
height: 20px
}

Ver resultado parcial.

Nuestro menú básico horizontal está hecho y funciona de maravilla. Ahora agreguémosle un rollover con imagen de fondo (background-image en vez de background-color) y que las instancias estén en un mismo gif:

Gif del a:link y a:hover

Solamente reemplazaremos donde antes habíamos seteado los parámetros relacionados con el fondo (background-image):

#menu ul {
padding: 0px;
margin: 0px;
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
background-color: #333;
list-style: none;
font-size: 14px;
font-weight: bold;
width: 100%;
height: 30px;
float: left;
}

#menu ul li a:link, #menu ul li a:visited {
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
color: #FFF;
padding: 5px 15px;
float: left;
text-decoration: none;
}

#menu ul li a:hover, #menu ul li a:active{
color: #900;
background-position: 0 -30px;
background-color: #CCC;
height: 20px;
}

Ver resultado final.

Una aclaración: en vez de resumir el background colocando aquí todos los parámetros (url, posición, repetición), preferí hacerlo cada uno en su respectivo atributo. Con esto, Safari lo puede leer fluído y no deja errores al desplegar el fondo. Además no me gusta resumir mucho. Otra aclaración: a diferencia del otro tutorial donde se explica lo mismo pero en un menú vertical, aquí el cambio de posición para mostrar la posición del fondo_menu.gif es de manera vertical, no horizontal: background-position: 0 -30px; donde fije el alto de la botonera en 30 pixeles para un despliegue exacto de las instancias de los botones.

Disculpa Bane por el retraso en la respuesta a tu inquietud. Espero ahora te resulte.

El código CSS completo:

body {
padding: 0px;
margin: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
}

#menu ul {
padding: 0px;
margin: 0px;
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
background-color: #333;
list-style: none;
font-size: 14px;
font-weight: bold;
width: 100%;
height: 30px;
float: left;
}

#menu ul li {
display: inline;
}

#menu ul li a:link, #menu ul li a:visited {
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
color: #FFF;
padding: 5px 15px;
float: left;
text-decoration: none;
}

#menu ul li a:hover, #menu ul li a:active{
color: #900;
background-position: 0 -30px;
background-color: #CCC;
height: 20px;
}