Menú flotante desplegable

El diseño de los "botones" es configurable si se te da medianamente bien el diseño (al final se explica), pero con la imagen que aquí se facilita, la cosa queda desplegada como en la imagen de arriba. Si quieres verlo en funcionamiento, aquí o en la imagen de arriba, tienes el enlace... y si te gusta, ésto es lo que tienes que hacer:

En primer lugar, hay que crear unas nuevas clases que llamaremos MENU y que recogen las distintas posibilidades de expansión del idem. Para ello, hay que copiar todo este código que sigue, justo antes de ]]></b:skin>

VER CODIGO

.menu{
font-size:12px; text-decoration:none; color:#000000; font-family:verdana; width:150px;
text-align:center; position:relative; margin:0px 0; padding:0px 0px;
}
.menu ul {
padding:0; margin:0; list-style-type: none; text-align:center;
}
.menu ul li ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0px; left:150px;
}
.menu ul li {
float:left; position:relative; z-index:90;
background:url(http://img353.imageshack.us/img353/5524/botonesvf9.gif) left top no-repeat;
}
.menu ul li a {
display:block; float:left; text-decoration:none; color:#000; width:130px; height:30px;
line-height:29px; font-size:12px; background:transparent; padding-left:20px;
}
* html .menu ul li a {width:115px; w\idth:65px;
}
.menu table {
border-collapse:collapse; border:0; padding:0; font-size:1em; position:absolute; left:0; top:0;
}
.menu ul li:hover a,
.menu ul li a:hover{
border:0;
background:url(http://img353.imageshack.us/img353/5524/botonesvf9.gif) left bottom;
}
.menu ul li a:hover {position:relative; z-index:100;
background:url(http://img353.imageshack.us/img353/5524/botonesvf9.gif) left center no-repeat;
}
.menu ul li:hover ul,
.menu ul li a:hover ul {
visibility:visible; width:150px; height:20px; z-index:10; overflow:visible;
}
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a{
display:block; background:transparent; color:#000; width:150px; line-height:19px;
padding:5px 0 5px 12px; height:20px; text-decoration:none;
}
* html .menu ul li a:hover ul li a {width:150px; w\idth:135px;
}
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
border:0;
background:url(http://img353.imageshack.us/img353/5524/botonesvf9.gif) left center no-repeat;
}
.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:151px;
background:url(http://img353.imageshack.us/img353/5524/botonesvf9.gif) left center no-repeat;
}
.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; width:11px; height:auto; color:#000; padding:0;
list-style-type:none;
background:url(http://img353.imageshack.us/img353/5524/botonesvf9.gif) left center no-repeat;
}
.menu ul li:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a {
display:block; width:115px; background:transparent; color:#000;
}
* htm .menu1 ul li a:hover ul li a:hover ul li a {width:150px; w\idth:115px;
}
.menu ul li:hover ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover ul li a:hover {
}

Una vez hecho ésto, nuestro menú se genera con con las instrucciones de listas, encerradas entre dos DIV de clase MENU

<div class="menu">

<ul> <li> ENLACE </li> <li> ENLACE </li> ... </ul>

</div>

Para las sub-opciones, simplemente anidamos una lista completa dentro de un elemento LI, tal y como se ve en el siguiente código:

<div class="menu">
<ul><li><a href="URLopcion1">Opción 1</a></li>
<li><a href="URLopcion2">Opcion 2</a></li>
<li><a href="#">Submenú</a>
<ul><li><a href="URLsubopcion1">Subopcion 1</a></li>
<li><a href="URLsubopcion2">Subopcion 2</a></li>
<li><a href="URLsubopcion3">Subopcion 3</a></li>
<li><a href="URLsubopcion4">Subopcion 4</a></li></ul></li></ul></div>

Para Blogger, lo mejor es copiarlo tal cual se muestra, porque si no, se os meterán líneas en blanco por aquí y por acullá y se os descuadrará un poco la cosa.

Evidentemente, hay que sustituir URLopcionX por la dirección del enlace a dónde quereis que lleve el botón.

La imagen que se ha usado en este código es ésta

HAZLO TU MISM@: Para crear botones a vuestro gusto, sin tener que retocar el código correspondiente a la hoja de estilo, el tamaño total de la imagen tiene que ser de 150x90 pixeles y cada "botón", debe tener 30px de alto. Se recomienda formato GIF y dejar un pixel transparente arriba y otro abajo del espacio destinado a cada "botón", para que se aprecie como éstos "flotan". De esta manera, tendrán 28 pixeles.

La parte superior de la imagen será la que corresponda al botón sin pulsar; la de enmedio la del botón pulsado y la de abajo, la de un botón desplegado.

Una vez construida la imagen, la alojais (en Blogger mismo) y sustituis en el primer código facilitado (CSS), todas las referencias a
http://img353.imageshack.us/img353/5524/botonesvf9.gif
poniendo en su lugar la dirección de vuestra imagen.

Como siempre, echarle imaginación.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter