Inicio Condiciones de Uso Mapa del sitio ▼ Ayuda Blogger Afiliación ¡Enlázame! Vótanos en... ▼ Contáctame Acerca de...

jueves, 4 de agosto de 2011

Menú desplegable y deslizante

Una de las cosas que más le llama la atención a los blogueros son los menús deslizantes, que están ocultos hasta que pulsa sobre ellos. Y eso vais a aprender hoy, gracias a una consulta de nuestro amigo Ramon, veremos como añadir un menú deslizante al gadjet de las paginas estáticas. Puedes ver un ejemplo aquí.

Lo primero de todo, debemos añadir Prototype y Scriptaculous a nuestra plantilla, para ello vamos a Diseño, luego a Edición de HTM, y justo detrás de la etiqueta <head>, pegamos el siguiente código, si utilizas Google Chrome puedes encontrarlo más rápido pulsando Ctrl + F:



A continuación vamos a pegar los estilos, busca en tu plantilla ]]></b:skin>, y justo antes de este, pega lo siguiente:



Ahora por último, busca en la plantilla esto:
<div id='content-wrapper'>
Si no lo encuentras puede que aparezca así:
<div class='tabs-outer'>


Y justo encima pega lo siguiente:

<table bgcolor='black' border='0' cellspacing='12'>
<tr> 
<td class='text'><a href='URL del blog'>Inicio</a></td>
<td class='text'><a href='javascript:void(0)' onclick='Effect.toggle(&quot;categorias1&quot;,&quot;slide&quot;); return false'>Menú &amp;#9660;</a><div id='categorias1' style='display: none; position: absolute; _margin-left:-100px; *margin-left:-100px; _margin-top:15px; *margin-top:15px; z-index:8880;'>
<table bgcolor='black' border='5' cellspadding='5' cellspacing='10'>
<tr><td class='text2'><a href='URL del enlace'>Pestaña Fila 1</a></td></tr>
<tr><td class='text2'><a href='URL del enlace'>Pestaña Fila 1</a></td></tr>
<tr><td class='text2'><a href='URL del enlace'>Pestaña Fila 1</a></td></tr>
<tr><td class='text2'><a href='URL del enlace'>Pestaña Fila 1</a></td></tr>
<tr><td class='text3'><center>Powered by: </center><br/><a href='http://laventanadewindows.blogspot.com/2011/08/menu-desplegable-y-deslizante.html'><img src='http://2.bp.blogspot.com/-vGpNKQzYNSc/TjqKs5tnHqI/AAAAAAAAAIc/iVn7KQ3rTwo/s1600/Publicidad+de+Submen%25C3%25BA.png'/></a></td></tr>
</table></div></td>
<td class='text'><a href='URL del enlace'>Enlace1</a></td>
<td class='text'><a href='URL del enlace'>Enlace2</a></td>
<td class='text'><a href='URL del enlace'>Enlace3</a></td>
<td class='text'><a href='URL del enlace'>Enlace4</a></td>
<td class='text'><a href='URL del enlace'>Enlace5</a></td>
<td class='text'><a href='URL del enlace'>Enlace6</a></td>
</tr></table>

El primer black, hace referencia al color de fondo del menú, y el segundo al color de fondo del submenú.
Además debes sustituir lo que está en rojo por los enlaces que quieras, y lo que está en verde por los títulos de esos enlaces.
Si quieres añadir más enlaces en el submenú, tan sólo añade después de </table></div></td>, esto:
<tr><td class='text2'><a href='URL del enlace'>Pestaña Fila 1</a></td></tr>


Si quieres añadir más enlaces en el menú principal, tan sólo añade antes de </tr></table>, esto:
<td class='text'><a href='URL del enlace'>Enlace7</a></td>

Si te funciono el truco o te gusta el post, un comentario se agradece.

6 comentarios:

  1. (Me pongo colorado) ¿Tu crees?
    Si en realidad es menú es un poco hecho a lo bruto, la pagina que te dejé tiene unos menús que agüita, de todas maneras muchísimas gracias y me alegro de que te hubiera servido.
    Saludos,
    Óliver.G

    ResponderEliminar
  2. Pues tiene buena pinta este menú desplegable.

    Un abrazo chico !!.

    ResponderEliminar
  3. Jejeje me alegro de que te gustara Celso, No será muy complejo pero al menos quedó bonito :)
    Saludos,
    Óliver.G

    ResponderEliminar
  4. Holaaaa, el menu despegable no me funciona esta estaticooo, no baja :( como haria asi como el tuyo con iconos asi todo bacan!

    ResponderEliminar
  5. Hola, estas segura de haber seguido todos los pasos?
    Porque si lo has hecho así debería funcionar...

    ResponderEliminar

Puedes comentar todo tipo de cosas, absteniéndote de:
- Realizar SPAM.
- Escribir insultos faltando al respeto de los demás usuarios.
Recuerda que en este blog, la moderación de comentarios está activada, así que piénsalo bien antes de enviar tu comentario si tiene algo "prohibido".