lunes, 13 de abril de 2009

Menú vertical desplegable

Ahora vamos a ver un menú muy sencillo y que puede servirnos para ahorrar espacio en la sidebar. La DEMO la pueden ver en mi blog, en la sidebar, donde dice "Enlaces".

♠ Vamos a Diseño - Edición HTML y justo después de <head> pegaremos el siguiente código:

<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>

♠ Damos click a guardar.

♠ Ahora vamos a Diseño - Añadir un elemento de página - HTML/Javascript y añadimos el código:

<a href="javascript:void(0);" onclick="expandcollapse('Diccionarios')">

<img border="0" src=" AQUÍ-URL-IMAGEN-BOTÓN"/>

</a><br/>

<ul id="Diccionarios" class="texthidden">

<li><a href="http://www.rae.es/rae.html " target="_blank"> RAE

</a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Videos')">

<img border="0"src="AQUÍ-URL-IMAGEN-BOTÓN"/>

</a><br/>

<ul id="Videos" class="texthidden">

<li><a href="http://www.youtube.com/" target="_blank"> YouTube </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Directorios')">

<img border="0" src="AQUÍ-URL-IMAGEN-BOTÓN&"/>

</a><br/>

<ul id="Directorios" class="texthidden">

<li><a href="http://www.blogsperu.com/" target="_blank"> BlogsPerú </a></li></ul>

♠ Agregaremos más enlaces o más pestañas al menú. Para que aparezcan los botones, reemplazamos AQUÍ-URL-IMAGEN-BOTÓN por la URL de nuestro botón con texto.

♠ Para hacer nuestros botones, podemos usar cualquiera de estas páginas, todas muy buenas y con herramientas sencillas de usar:

» Buttonator
» As Button Generator
» GR Sites

O si dominamos programas como Photoshop, podemos hacer algunos botones ahí, alojarlos y colocarlos en el código.

No hay comentarios:

Publicar un comentario