en CSS, Diseño web, HTML, Tutoriales / Marzo 31, 2009 / 1 Comentario

Es muy común ver en webs con diseño grunge esos menús con tipografía manuscrita que se subrayan al pasar el cursor encima.

Una técnica para lograr esto consiste en usar 2 imágenes: una para el menú no activado y otra para cuando pasamos el mouse encima, en este caso con los ítems subrayados. Usar la imagen del menú no activado como fondo de un div, colocar dentro del div una lista con parámetros de tamaño, cuyos ítems (en el estado hover) tengan como imagen de fondo el menú activado, o subrayado. A la imagen de fondo durante el hover debemos darle coordenadas de posición para que coincidan las partes.  A continuación voy a explicar cómo hacer un sencillo pero agradable menú grunge:

HTML

<div id=”contenedor_menu”>
<ul id=”menu”>
<li id=”blog”><a href=”index.html”>Blog</a></li>
<li id=”contact”><a href=”contact.html”>Contact</a></li>
<li id=”about”><a href=”about.html”>About</a></li>
</ul>
</div>

CSS

#contenedor_menu { /*–Creamos un div que contenga al menú, con las dimensiones de la imagen a utilizar */
height: 376px;
width: 292px;
overflow: hidden; /*Con overflow hidden hacemos que cualquier cosa que salga de los bordes del div sea invisible */
background:url(menu.png) no-repeat; /*Nuestra imagen de fondo, el menú */
}
#menu { /*-Ésto vamos a usarlo como id de la lista o ul, le damos la ubicación apropiada para la imagen que estamos usando*/
margin:76px 0px 0px 10px;
padding:0px;
}
#menu li { /*Quitamos los estilos de lista y la separación entre ítems*/
list-style:none;
margin:0px;
padding:0px;
}

#menu li, #menu a { /*Damos a los ítems de lista el tamaño apropiado para abarcar el texto presente en la imagen del menú, y display block para que los links funcionen como cuadro*/
display:block;
height:70px;
width:160px;
}

#blog, #contact, #about { /*Éstos son los id para cada ítem de lista, con el text-indent escondemos el texto del link*/
text-indent:-300em;
overflow:hidden;
}

/*La parte más importante: en el estado hover de cada ítem de lista cambiamos el background por el del menú activado, y le damos las coordenadas necesarias para que los ítems aparezcan justo donde deben estar*/

#blog a:hover {background:url(menu_on.png) -10px -76px no-repeat; }
#contact a:hover {background:url(menu_on.png) -10px -146px no-repeat; }
#about a:hover {background:url(menu_on.png) -10px -216px no-repeat; }

La mejor forma de entender todo esto es descargando el ejemplo y leyendo el código completo