Menú desplegable, un simple botón (2) -69-

Este menú desplegable consiste en hacer clic al botón y se muestra una lista de opciones.

1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>)

.texthidden {
display:inline
}

.shown {
display:block
}

2. Entre ]]></b:skin> y </head> agregar lo siguiente:

<script src='http://andrewhonors.googlepages.com/fecha.js' type='text/javascript'/>

- Guardar cambios.

3. Ir a Elementos de la página, clic en Añadir un elemento de página y seleccionar HTML/Javascript. Ahí tendrán que agregar el siguiente código:

<a href="javascript:void(0);" onclick="expandcollapse('musica')"><img border="0" src="http://dirección-de-la-imagen-del-botón"/></a><br/>

<ul id="musica" class="texthidden">
<li><a href="http://www.radioblogclub.com/" target="_blank">Radio Blog</a></li>
<li><a href="http://www.goear.com/index.php" target="_blank">Goear</a></li></ul>


<a href="javascript:void(0);" onclick="expandcollapse('video')"><img border="0" src="http://dirección-de-la-imagen-del-botón"/></a><br/>

<ul id="video" class="texthidden">
<li><a href="http://www.youtube.com/" target="_blank">Youtube</a></li>
<li><a href="http://www.veoh.com/" target="_blank">Veoh</a></li></ul>

**Como punto de partida hemos hecho un menú de música en el que aparece una lista: Radio Blog y Goear. Además, hay un menú de video en el que aparece: You Tube y Veoh

- En esta parte de código puedes repetirla cuantas veces quieras, ustedes tendrán que armarlo a su gusto.
- Solo tendrán que agregar el botón, la dirección de la página con su respectivo nombre.
- Además, puedes añadir una imagen justo antes del texto que aparece la lista.

Explicación:
- Si por ejemplo, a parte de música deseamos poner video entonces al crear otro botón, en expandcollapse('musica') cambiamos en donde dice música por video. Además, el id=”música” lo modificamos por video.
- En <img border="0" src="http://direccion-de-la-imagen"/>, viene hacer la imagen del botón.
- En donde dice Radio Blog, Goear, You Tube, vienen a ser una lista.
- En <a href="http://www.radioblogclub.com/" target="_blank">, viene hacer el enlace de la página enlazada.

Ejemplo:


Crear botones en Buttonator

Vía: A Consuming Experience