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.

5 opinaron:

Createcnic

hola estaria interesado en este menu pero al ponerlo solo me sale pa 3 enlace cuando quiero agragar mas enlaces no me deja se montan quisiera poner 8 o 9 enlaces pero no me deja ponerlos haver si me hechas una mano graciass

Responder
Jéssica YK

» Createcnic:
Deseas poner más enlaces dentro de cada categoría? o ¿te refieres a añadir más categorías? Según tu respuesta podre ayudarte.

S@lu2

Responder
dani
Este comentario ha sido eliminado por el autor.
Responder
dani

donde puedo ver la demo no encuentro "Enlaces"

Jéssica YK

» dani:
En la sidebar , en la parte inferior, está la parte de Enlaces, con unas pestañas naranja.

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio