Menú vertical desplegable y flotante

6 de noviembre de 2009 124 comentarios ,
Ayer estaba haciendo una plantilla (una de esas que siempre empiezo y nunca termino) y después de "armar todas las partes" me di cuenta que ya no quedaba espacio para agregarle un menú y entre tantas tonterías decoraciones que le había puesto se veía más saturado de lo que de por sí ya estaba.
Así que pensé: -¿por qué no poner un menú desplegable que esté escondido y que aparezca cuando presiono un botón?
De esta forma podemos meter varias pestañas y el menú no se verá saturado porque estará escondido y se desplegará hasta que el usuario lo decida, de igual modo se oculta de nuevo con el botón.
Pueden ver un ejemplo en este blog de pruebas.

Para poner este dinámico menú entra a Plantilla | Edición de HTML y pega antes de </head> lo siguiente:
<script type='text/javascript'>
//<![CDATA[
<!-- inicio
var mov;
var xpos=-200;

function VerOcultarMenu() {
if (mov==2) { mov=-2} else {mov=2};
document.getElementById("MenuDesplegable").style.top=parseInt(document.getElementById("BotonMenu").style.top)+30+"px";
document.getElementById("MenuDesplegable").style.visibility="visible";
MoverMenu() }

function MoverMenu(){
xpos=xpos+4*mov;
if(xpos <- 200) {xpos=-200};
if(xpos > 0) {xpos=0};
document.getElementById("MenuDesplegable").style.left=xpos+"px";
if (xpos <=-200 || xpos >=0) {window.clearTimeout() } else {window.setTimeout("MoverMenu();",50);} }
// final -->
//]]>
</script>

Ahora antes de la etiqueta </body> pega esto:
<div id='BotonMenu' style='display:scroll;position:fixed;top:100px;left:0px;'>
<a href='javascript:void(0)' onclick='VerOcultarMenu();' title='Mostrar / Ocultar'>
<span style='font-weight:bold; border:1px solid red; text-align:center; padding:5px; background:#ccc; color:#000;'>Ver/Ocultar menú</span></a>
</div>


Y por último después de la etiqueta <div id='outer-wrapper'> pega esto:
<div id='MenuDesplegable' style='position:fixed; visibility:hidden; background:#ccc; z-index:1;'>
<table style='border:1px solid red; width:150px; text-align:center; padding:5px;'>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 1</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 2</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 3</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 4</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 5</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 6</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 7</a></td></tr>
<tr><td><a href='#'>Pestaña 8</a></td></tr>
</table>
</div>


Personalización:
En el segundo código cambia Ver/Ocultar menú por el texto que quieras para tu botón. Utiliza lo que está en color verde para cambiar el color de fondo, color de texto y color de borde del botón.
También puedes usar una imagen como botón, sólo remplaza el texto por este código y cambia la URL de la imagen:

<img src="URL de la imagen" />

En el tercer código cambia el signo de gato (#) por la URL del enlace, y Pestaña por el texto que quieras para el vínculo.
Si quisieras agregar más pestañas sólo repite antes de </table> esta línea:

<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 1</a></td></tr>


Para cambiar el color de fondo del menú así como el borde y el ancho, cambia lo que está en color verde del tercer código.
Sencillo ¿no?


124 comentarios en:

" Menú vertical desplegable y flotante "

  1. Que bueno que lo subiste.
    Siempre con algo nuevo, que todos queremos tener.
    Ojala pronto subas trucos para celebrar la navidad, ya se que es Noviembre.

    ResponderEliminar
  2. Que tal Potro.
    Muy buen dato. Voy a ver cómo podemos implementarlo.
    Al igual que tú, estoy adaptando una nueva plantilla para hacer un "Cambio de Imagen". Ésto trae un poco de trabajo, ya que, si bién estas acostumbrado a la actual, también hay que comenzar a "familiarizar" con ella.
    Todo cambio implica un costo.
    Saludos.
    Jpz.-

    ResponderEliminar
  3. Oye está muy guapo, sobre todo por la pequeña animación que le has puesto. Precisamente estoy atascado en el menú de mi nuevo diseño, todavía no sé lo que hacer con él...

    Y el no ponerlo, y dejar que el usuario decida si verlo o no, no parece una mala idea.

    Me lo apunto como posible.

    ResponderEliminar
  4. Wow!!! que buena solución!!! ademas, no solo sirve para poner las etiquetas (entre otras cosas) de nuestro blog, puede utilizarse para infinidad de cosas!!! Muy buen truco!!!

    Un abrazo!!!

    ResponderEliminar
  5. el venado, no hay mucho para Navidad pero a ver qué se puede sacar al menos para decorar un poco el blog. Saludos.

    Jpz, habrá que esperar al cambio de imagen, aunque en lo personal me gusta mucho la que tienes. Saludos.

    José GDF, quizá como menú principal no, pero pude funcionar para otro tipo de menús como Twitter, Facebook, etc. Saludos.

    brother, tienes toda la razón, se puede aplicar para muchas cosas, incluso se le pueden agregar íconos para que se vea más chulo el menú. Saludos.

    ResponderEliminar
  6. Yo dentro de unos días si una encuesta sale positiva, cambiaré mi plantilla totalmente, me costará mucho trabajo, primero la haré en el block de notas para ir viendo y después haré pruebas de subidas, si todo sale bien me la quedaré... yo pienso que haré un sistema tecnológico, pero aún no estoy muy seguro, tendré que ver ideas, un saludo.

    ResponderEliminar
  7. Habrá que estar pendientes de tu plantilla y de la de Jpz.
    Date una vuelta por btemplates.com quizá encuentres alguna con la que te puedas inspirar.
    Saludos!

    ResponderEliminar
  8. Hola El Potro!
    Te felicito por el menu: es de muy buena calidad ;)
    Le he echado un ojo y no me he podido resistir a comentarlo
    Saludos!!

    ResponderEliminar
  9. Hola La Trucoteca de Blogs,

    La verdad a mí igual me gustó, aunque no le puse mucho empeño en el diseño pero seguro que quienes lo usen les quedará mucho mejor.
    Gracias por tu visita.
    Saludos!

    ResponderEliminar
  10. Hola El Potro, estoy aqui de vuelta (como siempre) quiero hacerte una consulta, tu sabes como puedo hacer para que las categorias o etiquetas estes a su vez subdivididas por categorias o etiquetas? para ser mas explicativo fijate en la seccion "categorias" de este blog: http://zonacerebral.com/

    Gracias, que tengas buen dia.

    ResponderEliminar
  11. Hola @rielCastellanos,

    JMiur tiene una estupenda explicación de cómo hacerlo, te dejo el enlace:
    http://vagabundia.blogspot.com/2008/04/jugando-con-las-etiquetas-de-blogger.html

    Saludos.

    ResponderEliminar
  12. Se me ocurrio algo, tal vez no sea tan genial pero se m ocurrio y quiero consultarte, que tal si copio las etiquetas que tenggo actualmente y las pego en mi blog a manera de enlaces (nuevo elemnto HTML...) y las ordeno como yo quiero, tendria el mismo resultado al darle click no? por ejemplo, esta es la etiqueta original (http://blogunah.blogspot.com/search/label/Noticias) si la copio y la pego como enlace normal, tendria el mismo efecto NO???? esa es mi duda, me parece muy simple q no se si sea posible, gracias amigo Potro

    ResponderEliminar
  13. Sí, de hecho hay quienes así hacen su "sub menú" de etiquetas, sólo que si a un post le metes una categoría y una "sub categoría" se verán ambas etiquetas en el post.
    Pero es una opción bastante sencilla y efectiva la que mencionas.

    Saludos.

    ResponderEliminar
  14. mae todo lo he hecho tal como tu dices pero no dunciona, lo unico que me sale es el menu pero lo que es l;a tabla no sale ni se esconde ...por favor pasa por aca solucioneszapata.blogspot.com , haber si me puedes ayudar compa...soy un fiel seguidor de tu blog...y en donde me meto lo comento y lo pongo como una referencia de CALIDAD...SIGUE ASI POTRO QUE LO HACES BIEN...ESPERO TU RESPUESTA COMPA

    ResponderEliminar
  15. Ing. Industrial,

    Ya he pasado pero no veo puesto los códigos del menú para ver cuál es el problema. Inténtalo de nuevo, quizá ahora tengas más suerte =)
    Gracias por tus comentarios y por la promoción.
    Saludos!

    ResponderEliminar
  16. ya puse el codigo pero sigue sin funcionar por-fa loco si se da una vueltita por la pagina solucioneszapata.blogspot.com para ver por que no funciona este menu que me agrada un monton... :(

    gracias de antemano potro sos una teja loco

    ResponderEliminar
  17. Hola Ing. Industrial,

    Mil disculpas, el código tenía un ligero pero circunstancial error.
    Copia y pega de nuevo el último código y deberá funcionar, cualquier cosa me comentas.

    Saludos!

    ResponderEliminar
  18. loco ya esta funcionando, si deseas puedes pasar para que lo veas..gracias man..potro estas en toda

    ResponderEliminar
  19. Hola potro soy otra vez yo q te estuve escribien en la parte del menu horizontal pero era este menu el q queria posicionar! otra pregunta vos me podrias mandar la css y el .js de este menu.??
    Muchas gracias Saludos!

    ResponderEliminar
  20. Hola Diego,

    Ya me parecía extraño que en el otro post decía ver/ocultar menú ;)
    Este menú no tiene archivo .js alojado en otra parte, el Javascript es todo el primer código, y el CSS serían las partes en color verde.

    Saludos.

    ResponderEliminar
  21. buenisimo!!ahora de nuevo la pregunta ahi estuve probrando con mover todo el menu para la derecha pero me queda mal!!como puedo hacer!???
    Disculpa las molestias!
    Saludos!

    ResponderEliminar
  22. Al inicio del segundo código está esta parte:

    left:0px;

    Cámbialo por right:0px;

    Saludos.

    ResponderEliminar
  23. Muchas gracias ya lo habia podido mover le cambie los valores de xpos y quede muy bien!!ahora otra pregunta lo q hice fue probar con guardar todo el codigo en un archivo .js y llamarlo desde html!en el cual puse

    script scr="menu.js" type="text/javascript"


    es correcto esto? porq a mi no me funciona!!
    muchas gracias y saludos!

    ResponderEliminar
  24. Mejor déjalo así como esta; si lo subes a un servidor vas a alentar la carga de la página y podrá funcionar o no dependiendo del estado del hosting.

    Saludos.

    ResponderEliminar
  25. Okas muchas gracias por tus respuestas!!saludos!!

    ResponderEliminar
  26. Hola de nuevo!!otra pregunta!! cuando pongo el menu q sale desde la izquierda hacia la derecha hay alguna manera de que lo que tenga en el costado derecho se me desplaze hacia abajo cuando salga el menu!??

    ResponderEliminar
  27. Hola Diego,

    Si quieres poner todo el menú a la derecha busca también casi al final del primer código esta parte:

    .style.left=xpos+

    Cambia el left por right.
    Saludos.

    ResponderEliminar
  28. ejje buen Post, Se le agradece
    Con este post y otro de Jmiur Logre aser un miniforo
    y Este truco de el Menu Me Sirvio Mucho..
    Aqui le dejo para q lo vean el Foro: UFE Activo | Foro De UFE(MAT)
    Muchas Gracias

    ResponderEliminar
  29. Hola potro,me gustaria perguntarte si este menu se podrian sustituir los enlaces por un gadget
    Me explico q al pinchar en abrir se abra pero en vez de haber enlaces ,haya un gadget
    Es q quiero poner un cuestionario en mi blog,y asi estaria oculto pero a mano

    ResponderEliminar
  30. Hola David Rubio,

    Depende de cómo esté hecho el gadget, necesitaría verlo para saber si se puede colocar ahí.

    Saludos.

    ResponderEliminar
  31. El gadget seria el formulario de emailme form

    ResponderEliminar
  32. Sí se puede, sólo encierra el código del formulario entre:

    <div id='MenuDesplegable' style='position:fixed; visibility:hidden; background:#ccc; z-index:1;'>
    y
    </div>

    Saludos.

    ResponderEliminar
  33. el formulario es demasiado grande y despues no cierra bien el gadget,pero con algo mas pequeño si funcionaria

    gracias

    ResponderEliminar
  34. Claro, tendría que ser un formulario corto.
    Saludos.

    ResponderEliminar
  35. hola
    por favot explica un poco mas como cambiarlo de color (y) (o) de diseño espero tu respuesta

    bay

    ResponderEliminar
  36. Hola ,

    En el tercer código donde dice background:#ccc; ahí cambias el color de fondo del menú, usa el código del color que más te guste. Si lo prefieres puedes poner una imagen de fondo, en ese caso el código sería así:
    background:url(URL de la imagen);

    Saludos.

    ResponderEliminar
  37. ok gracias pero me surgio otto problema el color del borde aparece montada en la imagen como hago para quitarlo?

    ResponderEliminar
  38. Cambia el código del botón que tienes por este:

    <div id='BotonMenu' style='display:scroll;position:fixed;top:100px;left:0px;'>
    <a href='javascript:void(0)' onclick='VerOcultarMenu();' title='Mostrar / Ocultar'>
    <div style='height:32px; width:150px; border:1px solid red; text-align:center; padding:0px; background:url(http://img705.imageshack.us/img705/6916/indice02.jpg) no-repeat; color:#FFBBE8;'></div></a>
    </div>

    Saludos.

    ResponderEliminar
  39. perdon por molestar tanto pero no me deja me sale este mensaje de error:
    Mensaje de error de XML: The element type "div" must be terminated by the matching end-tag "


    espero tu respuesta.....

    ResponderEliminar
  40. No es ninguna molestia ;)
    Copia de nuevo el código, el error te está diciendo que falta la etiqueta de cierre que está al final, quizá omitiste ponerla.

    Saludos.

    ResponderEliminar
  41. omg!xdd Este menú esta mejor!
    Lo probaré! ^^

    ResponderEliminar
  42. Ya lo he visto funcionando en tu blog ;)

    ResponderEliminar
  43. por fin ¡¡¡ me funciono gracias por compartir tus conocimientos ...¡¡¡
    otra duda mas como se hace para poner esos mensajes arriba del cuadro de comentarios..???????

    ResponderEliminar
  44. Entra en Configuración > Comentarios, y en donde dice Mensaje del formulario de comentarios, ahí escribe el mensaje que quieres que aparezca arriba de la caja de los comentarios.

    Saludos!

    ResponderEliminar
  45. listo gracias por todo el blog se ve mucho mejor gracias a ti..

    bay

    ResponderEliminar
  46. Tengo un par sobre el menú amigo:
    Como hago para cambiar el color de la tabla por gris?

    Es posible colocar la palabra "menú" o una imagen justamente en el borde de la tabla deslizante, de tal manera que al ocultarse quede visible la palabra menu en forma vertical, o una imagen?

    muchas gracias de antemano.
    saludos.
    dhesc.blogspot.com/

    ResponderEliminar
  47. Hola Fero,

    Para cambiar el botón de Ver/Ocultar sustituye ese código por el código que tengo en el comentario #41 sólo cambia la URL de la imagen que está ahí por la tuya.

    El color de la tabla ya está en gris, para cambiarlo por otro cólor fíjate en el último código donde dice background:#ccc; ahí pon el código del color que gustes.

    Saludos!

    ResponderEliminar
  48. Muchas gracias amigo!
    te felicito por tan excelente pagina.
    Estaré por acá con frecuencia.

    ResponderEliminar
  49. Claro que sí, eres bienvenido las veces que quieras ;)

    ResponderEliminar
  50. Estoy probando el menú en un blog de pruebas antes de colocarlo en mi nueva web y esta quedando muy bien, gracias.

    Tengo unas preguntas mas amigo potro, si no es molestia:
    Sin colocar ninguna imagen, sino dejando El "Ver/Ocultar-Menu", ¿es posible que haya menos espacio entre el Ver/Ocultar-Menu y los enlaces? Es decir hay como medio centimetro entre ellos, es posible que queden casi totalmente juntos?

    La otra pregunta es: Hay alguna parte del código que premita acelerar el efecto deslizante al hacerle click para que sea mas rapido?

    ResponderEliminar
  51. Hola Fero,

    Para acelerar la velocidad del desplazamiento busca esta parte del código y cambia lo que está en negrita por 10

    {window.setTimeout("MoverMenu();",50);} }

    Para reducir la separación entre el botón y la tabla busca en el código esta parte y cambia lo que está en negrita por 25

    ("BotonMenu").style.top)+30+"px";

    Saludos.

    ResponderEliminar
  52. Aupa majo hay alguna forma de hacer que un menu se habra y una vez abierto los demas tambien se habran?

    ResponderEliminar
  53. No Urko, ya que el contenido del menú es una tabla en CSS.
    Saludos.

    ResponderEliminar
  54. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  55. hola potro muy buena entrada esta que pusiste felicidades
    oye tengo dos preguntas
    yo estoy buscando algo parecido a esto que acabas de poner
    pero en lugar de que aparesca un link, quiero que aparescan otros elementos como un traductor, o un elemento que te permita cambiar el fondo del blog o el tamaño de la fuente , etc.....

    o sea que dentro de ese menu se le pueda meter html/javascript,
    es posible eso??

    y la siguiente pregunta heheh espero no ser inoportuno
    se puede crear una seccion flotante
    para añadir widgets ??
    de antemano muchas gracias por la atencion

    saludos y excelente blog !!!

    ResponderEliminar
  56. Hola Gerardo,

    Debe de poderse incluir otros elementos, sólo agrega el código en lugar de donde dice Pestaña1 y prueba si da resultado.

    La otra pregunta no la he entendido, los únicos medios para añadir gadgets son, desde los gadgets de Blogger, directamente en la plantilla, o usando la aplicación de un tercero.

    Saludos y gracias por tus comentarios.

    ResponderEliminar
  57. muchas gracias por tu respuesta potro asi como me dijiste
    ya logre poner la imagenes ahor estoy en la fase de hacer que funcione javascript alli por que parece que no se ejecuta :(
    pero ya avanzamos :D

    en cuanto a la segunda pregunta
    a ver si me explico bien

    cuano vamos a elementos de la pagina alli podemos ver los contenedores en donde podemos incliur las widgets y algun codigo html/javascript
    es posible que uno de esos contenedores pueda ser flotante?
    muchas gracias

    saludos desde pachuca mexico :D

    ResponderEliminar
  58. Puedes hacer flotante la sidebar por ejemplo, pero regularmente no da buenos resultados :s

    Saludos hasta Pachuca!

    ResponderEliminar
  59. hu!! no entonces asi le dejamos :D
    Muchas gracias potro por el tiempo que te tomas para contestar todas nuestras dudas

    saludos

    ResponderEliminar
  60. Hola Potro.. muy buena tu página, das buenos consejos.. yo he aplicado este menú en mi blog que me parece bien calidad pero al darle click sobre "ver/ocultar menú" se abre otra pestaña en blanco y al yo volver a la pestaña de mi blog ya esta abierto el cuadrito con los enlaces los cuales funcionan bien.. pero no entiendo por qué se abre esa otra ventana o pestaña en blanco.. mi blog es: http://entremiplumaylapared.blogspot.com/

    Gracias por tus aportes a la blogosfera!

    ResponderEliminar
  61. Hola otra vez Potro.. ya solucioné el problema.. estuve pensando cuál sería el motivo y recordé que como yo tengo el código de abrir los links en otras ventanas (base target='_blank'/) eso estaba ocasionando el error.. así que utilicé el código de target='_parent' y eso solucionó mi problema.. Gracias de todas formas.. ya que esos códigos también los había conseguido aquí antes.. jaja

    ResponderEliminar
  62. Excelente, me alegra que ya lo hayas solucionado :D

    ResponderEliminar
  63. Hola potro.. muy buen truco ya que las pestañas de menus me habian dado problema anteriormente y decidi cambiar por este hahah una pregunta? como cambio de de posicion de altura el boton (ver/ocultar menu)que este un poquito mas arriba de que que esta !

    ResponderEliminar
  64. En el segundo código busca esta parte:

    position:fixed;top:100px;

    Eso que está en negrita es la altura del botón, si lo cambias a un número más chico se subirá, ya será cuestión de que pruebes con qué número queda a la altura que deseas.

    ResponderEliminar
  65. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  66. Nombre mi potro muchas gracias por todos tus consejos y tips caon
    pero ya me canse
    jajaj ningun menu se quiere poner en mi blog :/
    ni modo tendre qe recurrir al flash vortex :(
    gracias potro eres un MAESTRO

    ResponderEliminar
  67. Te digo que nada funciona en las nuevas plantillas de Blogger.

    ResponderEliminar
  68. oie potro mi plantilla no tiene donde va el tercer codigo dice outer mi plantilla dice header
    PLEASE AYUDAME MAN

    ResponderEliminar
  69. Puedes probar ponerlo antes de <div id='header-wrapper'>

    ResponderEliminar
  70. no se puede potro me dice esto cuando le doy en guardar plantilla: No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "head" must be terminated by the matching end-tag "".

    Ni modo,pero lo intente con otra plantilla y si funciono Se ve de maravilla Gracias

    ResponderEliminar
  71. Ese error indica que hay un código distinto a lo de esta entrada que está incompleto.

    ResponderEliminar
  72. Oie Potro no le puedo meter imagen.. :( porke me sale este error

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The reference to entity "h" must end with the ';' delimiter.

    ayudame sii? =D

    GRacias Slaudos

    ResponderEliminar
  73. Posiblemente la URL de tu imagen está mal, necesitaría ver cómo es el código que estás poniendo.

    ResponderEliminar
  74. Ya sirvio Grax..!!
    pero Yo le kiero poner una imagen Redonda... no me sale.. Como lo hago..!! yo creo ke es por el padding:5px; yo kiero ponerle las medidas de la imagen.. Plis AYudame Si..! :D

    ResponderEliminar
  75. ¿Qué es exactamente lo que no te sale?

    ResponderEliminar
  76. Me sale la imagen.. pero me sale adentro del cuadro..!! tons yo le pongo mas px pero no sale bn..!! yo kiero ke salga la imagen completa..! :D como se prodia hacer?? =D

    Mira aki te dejo la Pagina http://mixtoprom11.blogspot.com/

    GRacias..!! :P

    ResponderEliminar
  77. A ver, trata con esto, dentro del código donde has puesto la imagen verás que dice esto:
    display:scroll;

    Pega antes de eso esto:
    width:50px;
    height:50px;

    Quizá con eso se arregle.

    ResponderEliminar
  78. Hola potro, tengo una duda, será posible q la pestaña q dice ocultar menu salga a la par del menu y no arriba ?? nosé si me di a entender..

    ResponderEliminar
  79. Con el diseño de este menú no, más adelante publicaré uno con el que sí se puede hacer ;)

    ResponderEliminar
  80. no puedo ponerlo, no encuentro donde poner el ultimo url....:S.
    help me

    ResponderEliminar
  81. Saludos desde RD hermano! Quiero ver como pongo este mismo menu, con sub-menus, para asi eliminar los que tengo en la barra lateral. Y asi agruparlos todos en un solo menu vertical.

    Gracias

    ResponderEliminar
  82. Hola Roy,

    Con este menú no es posible. En estos días buscaré un par de menús verticales a los que se les pueda agregar subpestañas.

    Saludos.

    ResponderEliminar
  83. Gracias! He buscado otras opciones, pero solo se incrustan con gadgets, por lo que no puedo ubicarlos tan exitosamente como el ejemplo que muestras aqui.

    Todo es para ganar espacio vertical en http://adca-atc.blogspot.com/

    ResponderEliminar
  84. Dejame aprovechar el tema. Si este menu no acepta sub-menus, no seria posible incrustar mas de un menu? O sea, uno al inicio de la pagina, otro al centro y otro al pie? Todos a la izquierda, para asi "dividir" por temas. Como decir, 1)noticias de aviacion 2)empresas de aviacion 3)tecnolocia de aviacion.

    ResponderEliminar
  85. Pues sí es posible pero tendrías que modificar el código de los tres fragmentos.
    Para otro menú repite los mismos pasos, pero en los códigos del segundo menú cambia:

    VerOcultarMenu por VerOcultarMenu2
    MenuDesplegable por MenuDesplegable2
    BotonMenu por BotonMenu2
    MoverMenu por MoverMenu2

    Debes cambiarlo en todas las partes que aparezca pero sólo para el segundo menú, en los códigos del primero debe quedar tal como está.

    ResponderEliminar
  86. Perfecto. Lo intentare mas tarde, gracias por tus conocimientos....

    Desde República Dominicana


    Roy

    ResponderEliminar
  87. Buenas, he descubierto esta página y me sirve de gran ayuda. Pero tengo un problema, estoy tratando de poner este menú desplegable pero cuando me meto en el código HTML no me aparece por ningún sitio el main-wrapper para poder copiar el código.

    ResponderEliminar
  88. Perdona no es el código que te he puesto antes sino el que pones como outer-wrapper, no aparece en el código HTML de mi blog.

    Un saludo y gracias.

    ResponderEliminar
  89. Bienvenid@ a Ciudad Blogger. ¿En cuál blog deseas ponerlo?

    ResponderEliminar
  90. Sí, sé que es de Blogger, pero necesito saber la dirección del blog para poder ver la plantilla, pues no todas son iguales.

    ResponderEliminar
  91. Buenas, con pasarte por la página es suficiente??? Podría pasarte el codigo directamente si te es mas facil verlo ahi.

    Disculpa si me ves algo perdido pero soy bastante nuevo en esto.

    ResponderEliminar
  92. Con dejar la direccion del blog es mas que suficiente.
    Saludos.

    ResponderEliminar
  93. Como cambio la altura de la tabla potro?

    ResponderEliminar
  94. La altura se autoajusta según el contenido de la tabla, si tienes menos celdas tendrás menos altura.

    ResponderEliminar
  95. yo en mi blog (todavia en construccion) no encuentro la capa de la que hablas en el tercer código

    ResponderEliminar
  96. ¿En cuál blog lo estás tratando de poner?

    ResponderEliminar
  97. Hola potro, una consulta, puedo llegar a lograr este efecto con chatango? Gracias.

    ResponderEliminar
  98. Nunca lo he intentado, sería cuestión de que probaras poniendo dentro del menú el código del chat y ver qué resultados obtienes.

    ResponderEliminar
  99. Hola potro que tal, veo q todavia no pones el menu de tu web, pero me interoso esta, ahora que ya estoy formando mi blog a base d tus trucos ( ya logre el sitemap ^^ ) asi que keria ponerle este menu pero no me sala la opcion outer-wrapper ni la id='header-wrapper'> solo tengo 2 lines ( buscando con crtl f )
    mi blog es www.revolucionstar.blogspot.com
    mi blog para q lo visites y le des una mirada ( tb puse el truco del cambio de imagen en la cabecera perfecto todo gracias a ti )

    ResponderEliminar
  100. En las plantillas hechas con el Diseñador de plantillas de Blogger el tercer código se pone arriba de:

    <div class='body-fauxcolumns'>

    ¡Saludos!

    ResponderEliminar
  101. Gracias potro ya lo hize no se como cambiar los colores donde dice red le puse blue para probar pero solo cambio la parte q muestra las pestañas y no el q dice ver mostra menu..

    ResponderEliminar
  102. Eso puedes cambiarlo añadiendo lo que está en negrita en esta parte:
    <a style="color:#FF00FF;" href='javascript:void(0)' onclick='VerOcultarMenu();' title='Mostrar / Ocultar'>

    El código del color puedes seleccionarlo en esta sección.

    Saludos.

    ResponderEliminar
  103. Saludo, El potro,

    Me gustaria saber se es posible que cuando de click por ejemplo a "Pestaña 1" de esta se deslice unas sub-pestañas "sub-pestaña 1.1".

    ResponderEliminar
  104. Con este no. A ver si en los próximos días publico algún menú vertical que tenga subpestañas.

    ResponderEliminar
  105. Buenos dias Potro.

    Como haria para que la tabla que sale quede fija , "usease" yo no quiero la funcion deslizante.
    Asi como que desparezca el boton de VER/Ocultar menu.
    O bien indicame donde puedo conseguir un menu fijo(flotante) de las caracteristicas que te indico.
    Agradecido de antemano.

    ResponderEliminar
  106. Buen día VRedondoF,

    Sólo añade antes de </body> lo siguiente:

    <div id='MenuDesplegable' style='position:fixed; top:200px; right:0; background:#ccc; z-index:1;'>
    <table style='border:1px solid red; width:150px; text-align:center; padding:5px;'>
    <tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 1</a></td></tr>
    <tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 2</a></td></tr>
    <tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 3</a></td></tr>
    <tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 4</a></td></tr>
    <tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 5</a></td></tr>
    <tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 6</a></td></tr>
    <tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 7</a></td></tr>
    <tr><td><a href='#'>Pestaña 8</a></td></tr>
    </table>
    </div>

    ResponderEliminar
  107. Buenas tardes Potro.
    Agradecido, me gusta mas fijo.
    Ya se que los que tengan la pantalla mas pequeña o entren desde el movil lo tendran amontonado, pero yo solo busco "mi publico", el resto haya ellos.

    Muy agradecido por tu ayuda.

    En cuanto haya remodelado todo te enviare el enlace para que lo veas.

    Repito muy agradecido.

    SALUDOS
    VRedondoF.

    ResponderEliminar
  108. Disculp potro como localizo en este truco el lugar donde debo agregar - target _parent - para evitar que intente abrirse en otra pestaña el menu porque agregue el truco:

    -- Abrir todos los enlaces en otra ventana (2) --

    si es posible me podrias explicar en base a que puedo localizar de este y otros gadgets el lugar correcto para agregar - target _parent -?
    para los futuros gadgets que vaya agregando.

    ResponderEliminar
  109. De hecho al final de esa entrada se menciona cómo reconocer dónde agregar el target='_parent'
    En el caso de los enlaces de este menú se agrega dentro de esta área:
    <a href='#'>

    Debes reconocer el a href eso indica que hay un enlace y ahí es donde se agrega.

    ResponderEliminar
  110. listo! Potro lo consegui, gracias por la respuesta.

    ResponderEliminar
  111. Buenas, me ha ayudado mucho esta herramienta.
    ¿No se puede poner que muestre el contenido más rápido?

    Gracias.

    ResponderEliminar
  112. Hola Pacheta,

    Para acelerar la velocidad del desplazamiento busca esta parte del código y cambia lo que está en negrita por 10

    {window.setTimeout("MoverMenu();",50);} }

    ResponderEliminar
  113. Hola, puedo insertar este menú desplegable en un gadget? Lo que quiero, en realidad, es poder situar el menú en cualquier lugar del blog. Ahora mismo lo tengo estático.
    Gracias de antemano por tu atención.

    ResponderEliminar
  114. Hola dolores, este menú debe estar dentro de la plantilla para que funcione :(

    ResponderEliminar
  115. perdóname la vida y la ignorancia T-T
    peor si pongo el menú en mi blog se crearan paginas nuevas?
    osea si pongo inicio (mi blog no lo tiene) a donde mandarían al visitante?
    y como lo enlaso?
    esk quiero el menu para separara las historias que hago por ejemplo:
    Fantasia
    fics
    Novela
    eso quisiera saber
    T-T


    http://wwwprincesaprilcom.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Aracelly, el menú no agrega ninguna entrada o página en tu blog, es sólo un menú en el cuál tú puedes cambiar los nombres de esas pestañas, añadir las URLs que tú quieras, etc.

      Eliminar
  116. Hola,
    me gustó mucho este menu, lo voy ha usar para poner los botones de compartir, pero los estilos se los voy a cambiar a ver si logro que se vea mejor. Muchas Gracias.

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger