Menú horizontal y algo +

20/feb/2006 53

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 a #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

CSSLab - link

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

#menu ul {
   padding: 0;
   margin: 0;
   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.

Comentarios

  1. carlos [#]

    hola como estan? espero que todos muy bien… estoy muy novato en esto y espero puedan ayudarme. me encantan los menus horizontales y he estado trabajando en uno, la cuestion es que cuando la lista queda de forma horizontal no se reparte en partes iguales a lo largo de la linea que le corresponde, es decir, si trabajara con una tabla de 5 columnas, pudiera repartir su espacio asignándole a cada una un 20% del espacio total, quedando cada columna con el mismo espacio por igual, nada de pixeles, sino porcentajes…. trabajando con listas no logro repartir el espacio horizontal de esta manera, solo con pixeles usando margin o padding. espero puedan entenderme y sobre todo ayudarme!!!! saludos desde caracas!!!

  2. Jorge Epuñan [#]

    carlos: trataste dandole:

    li {display:block; float:left; width:25%; text-align:center;}

    (teniendo en cuenta q 25% serian 4 elementos en la lista).

    Suerte.

  3. Listo para las listas ↝ CSSLab [#]

    […] menú son secuenciales, pero no necesariamente pertenecen a una lista. Les damos estilos, les ponemos fondos, cambiamos su color con :hover, pero si le quitamos los estilos, vuelve a ser una lista (ordenada o […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab