Como verán se puede hacer un menú expandible en forma muy sencilla.
La idea original la saque del blog
donde nos enseña a hacer, en forma muy clara, el truco de "[+/-] ABRE-CIERRA" Yo le puse imagen en vez de esos signos para que quede más simpático.Después de <head> pegan este 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>
Guardan Plantilla y luego van a "añadir elemento" y pegan el siguiente código:
<a href="javascript:void(0);" onclick="expandcollapse('video')"><img border="0" src="http://img340.imageshack.us/img340/4420/54074410lz1.gif"/></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>
<a href="javascript:void(0);" onclick="expandcollapse('musica')"><img border="0" src="http://img230.imageshack.us/img230/4025/68368781hz1.gif"/></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('imagen')"><img border="0" src="http://img138.imageshack.us/img138/9530/51862521cf7.gif"/></a><br/>
<ul id="imagen" class="texthidden">
<li><a href="http://imageshack.us/" target="_blank">ImageShack</a></li>
<li><a href="http://tinypic.com/" target="_blank">Tinypic</a></li></ul>
<a href="javascript:void(0);" onclick="expandcollapse('contadores')"><img border="0" src="http://img337.imageshack.us/img337/443/43453470ow3.gif"/></a><br/>
<ul id="contadores" class="texthidden">
<li><a href="http://www.contadorwap.com" target="_blank">Contador Wap</a></li>
<li><a href="http://www.estadisticasgratis.com/index.php" target="_blank">Estadisticas</a></li></ul>
<a href="javascript:void(0);" onclick="expandcollapse('botones')"><img border="0" src="http://img406.imageshack.us/img406/1425/73940793gl3.gif"/></a><br/>
<ul id="botones" class="texthidden">
<li><a href="http://www.buttonator.com/" target="_blank">Butonar</a></li>
<li><a href="http://cooltext.com/" target="_blank">Cooltext</a></li></ul>
Asi que les va a ser fácil configurar a su gusto.
Solo tienen que cambiar títulos, que en este caso hay un botón y los vínculos.
Desde ya si hay que explicar algo más en detalle me dicen y lo vemos.
13 comentarios :
Me alegro de que te haya servido: te ha quedado muy guapo ;)
Y si quieres un calendario de entradas de tu blog, ahora mismo parece que se han puesto de moda: ya llevo explicados tres en "Epílogo", jajajja :D
Reitero: que me alegro un montón de que te haya servido de algo Aire. Así que, un millon de gracias por comentarlo, porque siempre s muy agradable :)
Saludos.
Pd: A ver si mañana tengo un rato y te linkeo, ¿vale?
Me gusta pero para ser más completo le falta la acción de contraer al final sin tener que subir para recoger.
Hola ! como se puede hacer, para repetir este truco mas abajo !! el problema es que si hago el truco, por ejemplo, imaguinate!! donde tu tienes Consultorio, debajo, poner mas etiquetas de estas .
cuando lo hago se me desactiva las primeras :(
sabes como solucionarlo !! gracias
Hola Junio !!!
Perdón la tardanza en responder.
Te agradezco por el truco este que es muy útil.
Seguiré pasando por tu blog.
Saludos !
Hola Gem@ !!!
Perdón por mi retraso en responderte. También vi otros comentarios tuyos y te los agradezco.
Vi que en tu blog mejoraste este truco bonito. Te felicito, me encantó como quedo.
Nos seguiremos viendo.
Besos !!
Buenas mactrucos!!!
Para que eso no te pase en muy importante que la leyenda no se repita. Es decir cada vez que agregamos un enlace de estos [+/-] ABRE vas a ver que hay un parentesis arriba y se repite lo mismo mas abajo entre comillas. Aca tiene que ser igual la primera como la segunda:
<a href="javascript:void(0);" onclick="expandcollapse('¿¿¿????')">[+/-] ABRE</a>
<ul id="=¿¿¿???" class="texthidden">
Pero tiene que ser distinta en cada enlace [+/-] que hagamos para que no se abran todas a la vez.
Espero alla sido claro amigo.
Abrazo
hola César me podrías ayudar con lo del menú; haber he puesto uno pero creo que no lo he hecho bien por que no me funciona; es decir al pinchar en cada apartado no camnbia nada, hazme el favor de ayudarme.
Te lo agradecería con el alma, jejeje, en serio.
Un saludo
www.todocumbiayreggaeton.blogspot.com .EN CONTRUCCION.
cesar
me sale todo pero cuando pongo los nombres en la entrada 'Videos'-'Canciones',etc me sigue saliendo como el codigo html,(la imagen de ejemplo tuya)
POR QUEEE!!!
grax por la ayuda
estoy tratando de que cada uno de los menus, me abra y cierre pero no texto sino banner
me esta costando pero
tu ayudas mucho...
gracias
hola César! Desde que descubrí gracias a tu blog y entrada este menú expandible, lo uso un montón. Mil gracias por el dato y por todo lo que nos aporta tu blog a aquellos que poco y nada sabemos de diseño y menos de trucos para mejorar nuestros blogs!!!!
Saludos!
Cesar:
Gracias por tu blog. Desde que comencé me ha sido de gran ayuda. Hoy te escribo para que me indiques como puedo cambiar los botones del menú expandible y adecuarlo a mi blog (http://profesor hidalgo.blogspot.com). agradecido
Daniel
Hola!
Probe lo del menu expandible pero me queda con solo dos links cuando se expande, como hago para tener mas? probe copiando la parte del codigo donde va el nombre del sub-link y no me quedan escondidos
Si me podes ayudar te lo agradeceria muchisimo!!
Saludos
創意行銷網頁優質設計 SO HOT!找流量王編輯
精采台中時尚精美網頁設計最nice選擇,雲端時尚精美資訊科技系統位於台北給您優質網頁時尚設計hot推薦, 提昇您網站關鍵字排名在第一頁,另有多款主動性自動廣告貼文廣告軟體協助您業務推廣行銷,歡迎來電本網頁部門設計 資訊設計業務部張經理0928-968661
http://www.yahoo899.com/