Menú vertical desplegable tipo acordeón con jQuery

23 de agosto de 2011 368 comentarios ,
Hace algún tiempo vimos cómo poner un menú vertical desplegable con jQuery, muy presentable, pero su diseño está enfocado más a mostrar contenido en vez de subpestañas. Contrario al que veremos ahora, el cual es un menú vertical desplegable con efecto deslizante que sí tiene subpestañas por lo que podremos agregar enlaces a cada sección del menú.
Tiene dos variantes, puede desplegarse al hacer click, o puede desplegarse al pasar el cursor sobre él.

Funciona al hacer clickFunciona al pasar el cursor

Lo primero que haremos será insertar el script en la plantilla, para ello entra en Plantilla | Edición de HTML y antes de </head> agrega lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
//------------------------------
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// ---------------------------------
$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Lqm9LPwMdaxeaHJh6q9vQPeaq0lZKLFbc4d2IhgtN2SD1tNGI6QQypt6tgPq6LRNWjzmwDmcK6KNr-Z7Yd4YuoEeoBPoJ2dHdh5rDA1sU6ElcdAA1f4IF9hN7oz6IJvQsoymoGmhoIY/)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ5W34qEXrXPwo3ga254nS_-SjiMpVXgBjcYOkIyR0tgWamDEWpD1UfNUCm7BMyxfYBBrEkak8HYt3ZAm_5HK7bY5AyJDntkc-ZxEJxu7suBe_6WK8m63V5RqUDiEEseoR6X3-ID9IXu0/)"});
});


$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Lqm9LPwMdaxeaHJh6q9vQPeaq0lZKLFbc4d2IhgtN2SD1tNGI6QQypt6tgPq6LRNWjzmwDmcK6KNr-Z7Yd4YuoEeoBPoJ2dHdh5rDA1sU6ElcdAA1f4IF9hN7oz6IJvQsoymoGmhoIY/)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ5W34qEXrXPwo3ga254nS_-SjiMpVXgBjcYOkIyR0tgWamDEWpD1UfNUCm7BMyxfYBBrEkak8HYt3ZAm_5HK7bY5AyJDntkc-ZxEJxu7suBe_6WK8m63V5RqUDiEEseoR6X3-ID9IXu0/)"});
});
});

//]]>
</script>
Ahora antes de ]]></b:skin> añade los estilos:
/* Menú vertical desplegable
----------------------------------------------- */
.menu_list {
width: 180px; /* Ancho del menú */
}
.menu_head {
padding: 5px 10px;
color:#848484; /* Color de las pestañas principales */
cursor: pointer;
position: relative;
margin:1px;
margin-left:0;
margin-right:0;
font-weight:bold;
background-color: #424242; /* Color de fondo */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ5W34qEXrXPwo3ga254nS_-SjiMpVXgBjcYOkIyR0tgWamDEWpD1UfNUCm7BMyxfYBBrEkak8HYt3ZAm_5HK7bY5AyJDntkc-ZxEJxu7suBe_6WK8m63V5RqUDiEEseoR6X3-ID9IXu0/);
background-position:center right;
background-repeat:no-repeat;
}
.menu_body {
display:none;
}
.menu_body a{
display:block;
color:#848484; /* Color de los enlaces */
background-color:#BDBDBD; /* Color de fondo de los enlaces */
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color: #000000; /* Color de los enlaces al pasar el cursor */
text-decoration:underline;
}
Por último entra en Diseño | Añadir un gadget | HTML/Javascript, y ahí pega la estructura del menú.
Si quieres el que se activa al hacer click pega este código:
<div id="firstpane" class="menu_list">

<p class="menu_head">Pestaña 1</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 2</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 3</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>


</div>
Si quieres el que se activa al pasar el cursor entonces pega este código:
<div class="menu_list" id="secondpane">

<p class="menu_head">Pestaña 1</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 2</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 3</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>


</div>
Ya sólo cambia el nombre de las pestañas, de las subpestañas, y agrega las URLs de los enlaces donde se indica.

Si quieres agregar más subpestañas sólo añade debajo de la última subpestaña una línea como esta:
<a href="URL del enlace">Sub pestaña 3</a>
Y si quieres agregar otra pestaña con sus respectivas subpestañas agrega antes del último </div> un código como este:
<p class="menu_head">Pestaña 4</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>
Como siempre en color verde he puesto las anotaciones donde puedes personalizar el menú como es el color de fondo, el texto, etc.
Las flechas son unas imágenes, si quieres cambiarlas deberás cambiar las URLs de estas imágenes que se encuentran tanto en el primer como en el segundo código.

Es un menú sencillo pero con la facilidad de agrupar varios enlaces y además con esos efectos deslizantes que a todos gusta.

Vía | Roshan's blog


368 comentarios en:

" Menú vertical desplegable tipo acordeón con jQuery "

  1. Muy buen aport como siempre ^-^salu2

    ResponderEliminar
    Respuestas
    1. Como es para agregar mas de un URL en una subpestaña ???

      Eliminar
    2. En una pestaña sólo puedes poner una pestaña y un enlace.

      Eliminar
  2. Brillante, Padrisimo... Ingenioso Potro!

    Estudiaré las posibilidades de ponerlo en uno de mis blogs, vamos a ver cual es el beneficiado...

    Estaba un poco perdido y distante del mundo Blogger pero ya llegué y Seguré al click de tus post...

    Gracias Amigo!...

    ResponderEliminar
  3. Excelso potro,no habrá ningún otro como tu en el futuro,lo pondré en alguno de mis post ;)
    http://ferengano.blogspot.com/

    ResponderEliminar
  4. No Puedes Poner Un Menu Asi pero en Orizontal Sin Que Los HTML Se Pegen A La Plantilla De Mi Blog Gracias Buen Aporte Potro Felicidades!!!! (: ! Gracias

    ResponderEliminar
  5. Lady Pink, que tengas linda mitad de semana!

    Circulo W.H., tiene muchas posibilidades, nada más es cuestión de personalizar los colores en caso de que no se adapte al diseño de tu plantilla. Saludos!

    ResponderEliminar
  6. Ferengano, gracias por pasarte por acá :)

    Mazter!!!!, en el menú, valga la redundancia, mira la sección de menús, ahí hay algunos horizontales.

    ResponderEliminar
  7. Hola potro , como pones los colores de las pestañas? que debo poner .. por ejemplo si lo deseo azul?

    ResponderEliminar
  8. Hola Potro, genial como siempre, aunque ya no pongo más cosas por no saturar, siempre me gusta leer todas tus enseñanzas y aportes, gracias y un abrazo

    ResponderEliminar
  9. Hola potro disculpa q te moleste con otro tema.. hoy dia note hace unas horas q las imagenes de mi blooger no estan (ninguna para ser especificos) desaparecieron todas no solamente de mi blog de otros blogs tb esto se debe a q amigo ?

    ResponderEliminar
  10. Que chulo! Quizás lo haga pero me parece un poco complicado. Yo lo intento y ya veeremos si lo hago bien, xD

    ResponderEliminar
  11. exelente lo implemente para uno de mis sitios saludos http://www.descargardvdriplatino.net/

    ResponderEliminar
  12. Hugo B., mira la tabla de colores, ahí puedes seleccionar el color y su código.

    MaGoS RaDioMuSiC, bien pensado, lo que no sea necesario hay que prescindir de ello ;)

    ResponderEliminar
  13. FarStar, no he sabido de reportes sobre ese tema. ¿Hiciste alguna modificación en tu cuenta de Picasa? ¿Te aparece algún mensaje en tu cuenta o las fotos?

    David, parece complicado pero ya verás que no lo es ;)

    Bestia Games, qué bueno que te ha gustado!

    ResponderEliminar
  14. Potro tengo una duda , como puedo cambiar el color del texto de el gadget de las etiquetas de blogger? su color por default es negro pero quisiera otro color eso se podria?

    ResponderEliminar
  15. Parece que el Potro esta regresando a sus origenes :O que sera despues?

    Leer mas con imagen (3)

    O.O

    Salu2!! Potro^^

    ResponderEliminar
  16. hola,
    me podrias ayudar? En mi blog, al pie de cada post debería aparecer "Enlaces a esta entrada"
    o "Hacer un enlace"
    Pero en mis blogs esto no aparece.Ya he revisado en Configuración, en Diseno, todo lo que tiene que ver con los enlaces está clickeado con SI.
    Sin embargo no aparece la frase en mis blogs?
    Sabrías decirme cómo y qué hacer para que aparezca "Hacer un enlace a esta entrada", además como hacer un enlace en otro blog?

    un saludo sincero^^

    Te doy gracias desde ya. Espero me puedas ayudar

    ResponderEliminar
  17. PeliculasTube, agrega antes de ]]></b:skin> esto:
    #Label1 a {color:#FF0000;}

    Con eso podrás cambiar el color a los enlaces del gadget de etiquetas.

    ResponderEliminar
  18. TutoGeek, ¿Leer más con imagen 3...? probablemente ;)

    ResponderEliminar
  19. Hola Rebecca,

    Mira esta entrada, ahí verás el código que pertenece a esa área, sino lo tienes en tu plantilla entonces agrégalo después de <div class='post-footer'> o un poco más abajo.

    Eso hará aparecer nada más el enlace, ahora habrá falta que alguien haga click ahí para publicar en su blog sobre tu entrada, cuando eso suceda entonces aparecerá ahí el enlace de quien habló sobre tu entrada en su blog.

    Saludos.

    ResponderEliminar
  20. Hola Potro.
    Esto es genial!!
    Ya veremos si me sirve, ando pensando en rellenar las paginas estaticas con algo mucho mas que canciones, tal vez me sirva para enlazar ..humm..
    Todo es probar! ;)
    (Te acabo de agregar con el "me gusta" en facebook)

    ResponderEliminar
  21. Holas Potro, paso un tiempo no? jeje
    Lo tendre en cuenta para una nueva version de uno de mis blog, me gusto para mandar otros enlaces de improtancia... jeje
    Saludos ;)

    ResponderEliminar
  22. Angie, esa es la palabra clave, probar ;)

    javi_anubis, eso veo, no te pierdas mucho eh!

    ResponderEliminar
  23. Hola potro, no ninguna modificacion... es mas me figue en un otro blog mas y al parecer esta con las mismaas pues pone un anuncio http://www.somosmovies.com sobnre el tema de las imagenes ... debe ser cosa de google o picasa ?

    ResponderEliminar
  24. Hola potro intente entrar a picasa y desde mi cuenta de gmail y manda este anuncio ... "Welcome to nginx!!"

    ResponderEliminar
  25. Ese puede ser un problema con tu navegador o tu equipo. ¿Ya eliminaste cookies, caché e historial?

    ResponderEliminar
  26. Cómo andas Potro? Te hago una pregunta, hay posibilidades que algún día Blogger alargue los enlaces, o se puede pedir el cambio en algún lado?
    Específicamente esto es lo que te digo:
    Que el link del post en vez de decir:
    http://ciudadblogger.com/2011/08/menu-vertical-desplegable-tipo-acordeon.html
    diga:
    http://ciudadblogger.com/2011/08/menu-vertical-desplegable-tipo-acordeon-con-jquery.html
    o sea, todas las palabras que uno coloque en el título.

    ResponderEliminar
  27. Hola potro cuando tu pones los codigos en la entrada lo pone en citar no?
    como puedo tener lo mismo que tu?
    un ejemplo en la entrada esta dices;Ahora antes de ]]> añade los estilos: y ahora dentro aparece una ventana de fondo negra como lo puedo poner igual en mi blog?

    te lo dejo aqui; www.pequemundossims.blogspot.com

    ResponderEliminar
  28. Me parece Genial =)

    Siempre visito tu blog y encuentro cosas interesantes.. pero esta vez si me sirivio de mucho

    Gracias Ciudad Blogger

    ResponderEliminar
  29. amigo potro listo solucione mi problema de las imagenes al apreer era el registro mmm bueno y ahora q volvi a mi blog estaba restaurando links caidos y me doy cuenta q el buscador que coloque mm ya no funciona ... pues no me encuentra las entradas que tengo (algunas) como por ejemplo harry potter y las reliquias de la muerte parte 1 Latino y la de Zookeeper o(el guardian del zoologico) y naa tampoco encuentra X.men :S bueno con esas eh probado ya que los enlaces de la descarga estaban caidos tampoco voy a ir probando todas las entradas :S .. pero a q se ebe esto ?? antes me buscaba bien todo :S

    ResponderEliminar
  30. potro o tal vez see debaa q a ahora compre un dominio propio ??? y la direccion ahora ia no ieva el .blogspot ?

    si es asi como lo edito ?

    ResponderEliminar
  31. Hola Potro, no tiene nada que ver con esta entrada pero haber si me puedes ayudar. Quiero poner el código (html) de enlace de links (gadget blogger) en una página pero no sé como puedo coger el código para meterlo en una página...

    muchas gracias por tu atención mi blog es...

    http://albacete-fotos.blogspot.com/

    ResponderEliminar
  32. Pozo+10™, eso depende absolutamente de Blogger, que lo podamos pedir quizá sí, que hagan caso, lo más seguro es que no.

    Antonio, yo lo pongo dentro de un bloque entrecomillado

    ResponderEliminar
  33. Ýalosabes, gracias a ti por tu visita :)

    FarStar, si compraste recién el dominio y está bien configurado entonces necesitas esperar a que los robots regresen a tu blog y actualicen toda la información. Igual no está de más que enviés un sitemap.

    ResponderEliminar
  34. mojul8, los gadgets no pueden incluirse dentro de una página o entrada, sólo funcionan en el área de gadgets. Así que en ese caso tendrías que añadir manualmente enlace por enlace dentro de tu página.

    ResponderEliminar
  35. ahhhh gracias potro no tenía ni idea, normal que no haya encontrado nada...

    muchas gracias amigo eres un fenómeno.

    un abrazo

    ResponderEliminar
  36. Potro! Muy útil tu publicación, en verdad muy útil!

    En un momento te supe preguntar sobre si jQuery podía resolver el tema de los menús desplegables para desentenderme de Sciptaculous y andar reparando compatibilidades en mi lista de scripts (cosa que intenté pero no pude subsanar).

    Lo acabo de implemtar en mi blog, más precisamente en esta página interna la cual se muestra con un pequeño error, que no puedo corregir, y es que el fondo donde se encontrarían los enlaces, yo le puse texto, y se muestra como background repetido en "x" e "y", la flechita que indica el desplazamiento de las pestañas principales.

    Me harías el favor de entrar y decirme como corregir eso? Muchísimas gracias de antemano colega!

    ResponderEliminar
  37. Este es el link, te lo doy de nuevo porque no veo que el a href funcione en mi comentario anterior.

    http://www.mzcordoba.com.ar/2011/01/preguntas.html

    ResponderEliminar
  38. Hola Excel, prueba eliminar la imagen abajo.png que se encuentra en el código del script.
    Saludos.

    ResponderEliminar
  39. Hola potro, en principio te agradezco y felicito por la info que das. Normalmente evito escribirte y me guío por las respuestas a los otros comentarios, pero acabo de instalar este truco y tengo una duda que espero puedas resolverme. Mi idea es que los enlaces del menu lleven a todas las entradas etiquetadas bajo un nombre específico. Es decir, que en la pestaña "Colores", se haga click sobre los enlaces "Azul" y "amarillo" y estos me lleven a las entradas etiquetadas con el nombre azul o amarillo. No sé que URL poner en el gadget para lograr eso. Espero haberme explicado. Gracias de ante mano.

    ResponderEliminar
  40. Gracias Potro! Ahora me funcionan mejor, aunque perdí la imagen de la flechita, es un detallito que hubo que sacrificar. xD

    Gracias por tu paciencia compañero!

    ResponderEliminar
  41. Hola Hernan Yako,

    En ese caso la URL que debes poner es la URL de la etiqueta que quieres, que en este caso sería la URL de la etiqueta Azul, y Amarillo.
    Te dejo un enlace donde se detalla más ese asunto de los menús y las categorías en los enlaces:
    http://ciudadblogger.com/2010/06/menu-de-categorias.html

    Saludos.

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

    ResponderEliminar
  43. Saludos Potro, y cuando vuelvas de vacaciones tendrás la tarea acumulada.
    Como puedo adaptar la parte (MENU)
    POPULAR TAGS BLOG ARCHIVES
    de esta plantilla

    http://btemplates.com/2011/blogger-template-econto/demo/

    en una plantilla nueva blogger.
    Gracias y espero hayas disfrutado del descanso merecido.

    ResponderEliminar
  44. Saludos nuevamente... ya encontré la respuesta aquí mismo,
    ( http://ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html )
    No sabía como se llamaba el dichoso TABVIEW....

    ResponderEliminar
  45. Hola Potro.

    Primero agradecer tus valiosos aportes que me han servido mucho para nuestro blog.

    Quiero colocar más menús, para separar los viajes. Inserté otro gadget con los enlaces en las subpestañas. Aparece el menú pero no se despliegan las pestañas.

    Cambié el orden y me di cuenta que sólo despliega el primer gadget, los otros no.

    Que debo hacer?

    Gracias por tu ayuda y espero que no te de duro el síndrome post-vacacional.

    El blog es http://viajesconmochila.blogspot.com/

    Muchas gracias

    ResponderEliminar
  46. Gabriel, gracias, sí disfruté el descanso, aunque ahora mismo necesito otro :)
    Qué bueno que ya has encontrado lo que buscabas. Saludos.

    ResponderEliminar
  47. Hola Sonia y Ainara, entré a tu blog pero sólo vi un menú, no vi alguno más que estuviera puesto por lo que no pude corroborar el problema que mencionas. Si lo llegas a poner de nuevo me avisas para echarle un vistazo.
    Saludos.

    ResponderEliminar
  48. Hola Potro.
    Ya puse de nuevo el menú para que lo revises por favor.
    Copié el mismo código que el de arriba y borré algunos enlaces.
    Ya ves que no se despliega.
    Si cambio el orden de los menus, abre el que está de primero.
    Si me puedes ayudar te lo agradesco.
    Un saludo.

    ResponderEliminar
  49. Hola Sonia y Ainara,

    Parece que ese error sólo sucede con Internet Explorer pues en los demás navegadores sí funcionan ambos menús al mismo tiempo.
    Lamentablemente en la página del desarrollador no hay soporte para ese navegador :(

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

    ResponderEliminar
  51. Gracias Potro por tu comentario.
    He estado mirando opciones y se menciona la función find() cuando se quiere repetir una acción en una misma página.
    Pero como no tengo ni idea de códigos no se dónde ponerlo.
    Podrías comentarme si por esta via se puede buscar una solución?
    Gracias de nuevo por tu ayuda.

    ResponderEliminar
  52. Hola de nuevo Sonia y Ainara,

    No conozco la función que dices, pero, parece que experimentando he dado con la solución, o al menos que me ha resultado a mí.
    El primer código ponlo después de <head> en lugar de ponerlo antes de </head>
    Con eso me ha bastado a mí para que funcionen los dos menús en Internet Explorer, espero que igual a ti te funcione.

    Saludos.

    ResponderEliminar
  53. Voilà !!!!
    Me funcionó a la primera.
    Muchas gracias por tu ayuda. Te seguiré dando clicks en los anuncios que es la manera más práctica de agradecerte.

    ResponderEliminar
  54. Como hago para agregar dos menus a la vez?
    ¿Se puede?
    Agregue este primero
    "http://ciudadblogger.com/2010/09/menu-desplegable-con-efecto-deslizante.html"
    (Menú desplegable con efecto deslizante)
    Me funciono perfectamente.... Pero, cuando instalo este
    (Menú vertical desplegable tipo acordeón con jQuery)
    El anterior deja de funcionar...
    Me gustaria tener los dos en el mismo blog...
    ¿Hay posibilidades?

    ResponderEliminar
  55. El problema es que los scripts que se usan en ambos menús no son compatibles. Aunque hay un hack que hace que estos scripts funcionen al mismo tiempo, me parece que no aplica para este caso.

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

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

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

    ResponderEliminar
  59. Muy util sin duda, me preguntaba si hay una forma de realizar algo similar pero con las etiquetas

    ResponderEliminar
  60. De hecho puedes usarlo para cualquier enlace, en este caso para las etiquetas sólo toma la URL de la etiqueta y la pones en la pestaña que quieres.

    ResponderEliminar
  61. Oh se ve muy bien, me gusta este menú, además que las opciones de modificarlo son muchas. Gracias Potro =)

    ResponderEliminar
  62. Potro, Hola de nuevo.
    No se que ha pasado con mis menús. Hace dias no actualizaba el blog (poco internet en Laos) y acabo de ver que no funciona ningún menú.
    No he tocado nada en los códigos, antes funcionaban.
    Actualicé la versión del jquery que recomiendas en otra entrada, pero nada.
    Me puedes ayudar? Como tengo diseñado el blog, todo se basa en los menús, así que en este momento no se puede acceder a la información.
    Espero que me puedas ayudar, el blog es
    http://viajesconmochila.blogspot.com/
    Gracias.

    ResponderEliminar
  63. Hola Sonia y Ainara,

    ¿Has probado ver tu blog con otro navegador? Ahora mismo acabo de ingresar y veo los menús funcionando sin ningún problema. Todos se desplazan y muestran la información correspondiente.

    Saludos.

    ResponderEliminar
  64. Gracias Potro.
    Lo probaré desde otro ordenador, tengo el explorer y un notebook con muy poca capacidad para instalar otro navegador.
    Pero si me dices que se ven los menús, me tranquiliza.
    Muchas gracias !!!

    ResponderEliminar
  65. Potro, efectivamente el problema era de mi explorer 8. Lo volví a instalar y ya veo los menús funcionando.
    Gracias por tu tiempo.

    ResponderEliminar
  66. Me alegro que no haya sido nada grave y que todo esté en orden :)

    ResponderEliminar
  67. Buenas Potro,
    este es el menú al que me refería en el otro post, ¡qué no conseguía encontrarlo!, me queda muy despegado del margen izquierdo, ¿Cómo podría desplazarlo un poco para cuadrarlo con el espacio?
    Te dejo la URL
    www.israelcornejosanchez.blogspot.com

    ResponderEliminar
  68. Gracias AnticuarioReligioso. Siento hacerte dar tantas vueltas pero la intención es sólo que quien tenga el mismo problema pueda encontrar aquí mismo la respuesta al problema.

    Para recorrer el menú hacia la izquierda agrega debajo de:
    .menu_list {

    Esto:
    margin-left: -30px;

    ResponderEliminar
  69. Hola Potro, hay alguna manera de ponerle colores gradientes a las pestañas?.
    Desde ya gracias por tu ayuda.

    ResponderEliminar
  70. Potro dos consulta, que cambios le debería hacer a este menú para agregarlo como pagina y no como gadget, y cuando uso el internet explorer, me desaparecer los gadget que estén debajo del menú. Te agradezco por responderme

    ResponderEliminar
  71. chfprueba, sí, tendrías que cambiar esta línea:
    background-color: #424242; /* Color de fondo */

    Por el código del fondo gradiente que quieres, por ejemplo:

    background-image: -moz-linear-gradient(top, #000000 13%, #FFFFFF);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.13, #000000), color-stop(1.0, #FFFFFF));
    background-color: #DDDDDD;

    ResponderEliminar
  72. Doris Cullen, con Internet Explorer 8 y 9 debería funcionar bien, yo he probado el menú con ambos navegadores y en los dos funciona perfecto.
    ¿A qué te refieres con ponerlo como página? Si deseas poner el menú dentro de una entrada, o dentro de una página sólo debes poner el tercer código en la entrada o página que quieres, aunque, muchas veces los menús no se ven igual cuando se ponen ahí. Saludos.

    ResponderEliminar
  73. si, eso es lo que quiero ponerlo dentro de una pagina estática, y lo puse y tienes toda la razón con que no se mira igual, me poder recomendar un menú que se puede poner dentro de una pagina y gracias, tu blog me ha enseñado bastante

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

    ResponderEliminar
  75. Hola Potro, agradezco tu ayuda con los colores gradientes pero por alguna razon si yo hago el cambio como tu me dices las pestañas se ven en color #DDDDDD y no en gradiente.
    Lo que estoy tratando de hacer es que las pestañas se vean como botones.
    Si puedes ayudarme con esto muchas gracias.

    ResponderEliminar
  76. Doris Cullen, todos se pueden poner ahí (o la mayoría), pero que se vea bien dependerá de la plantilla que uses y del tipo de menú. Para esos casos sólo es cuestión de probar hasta que encuentres uno que se vea bien ahí.
    Yo puedo ayudarte a corregir ciertas cosas para que se vea bien el menú en la entrada, pero únicamente por la forma como se pueda ver en los otros navegadores, pues para IE hay pocas herramientas que nos ayuden a detectar los problemas con los estilos.

    ResponderEliminar
  77. chfprueba, si usas Internet Explorer no verás gradientes, los estilos CSS para gradientes sólo son soportados en navegadores modernos. Sino usas IE y aun así no ves el gradiente dime dónde lo has puesto para que pueda echarle un ojo.

    ResponderEliminar
  78. Hola Potro, el código lo he colocado en www.chftandil.com .
    Muchas gracias como siempre por tu invalorable ayuda.

    ResponderEliminar
  79. Es verdad, es que había olvidado que la pestaña ya tiene una imagen de fondo (la flecha), que bien puedes quitarlo pero dejará de verse la flecha.
    Si deseas hacerlo tendrás que eliminar esta línea:

    background-image: url(https://lh5.googleusercontent.com/-mQHPLQrjxcI/TlQJSHgEsZI/AAAAAAAABno/HbkoM9nbaWQ/flecha-abajo.png);

    Saludos.

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

    ResponderEliminar
  81. por qye no me funciona nada en mi web que tenga jQuery

    Mi web pcxpertos.es.tl

    ResponderEliminar
  82. Tal vez porque tienen muchas versiones de jQuery:
    http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

    ResponderEliminar
  83. El < /head > es el mismo < /body > ???

    ResponderEliminar
  84. Hola Potro, muchas felicidades por tu gran trabajo ciudadblogger.com

    Quiero meter un menú dentro de una entrada; he probado este en la siguiente entrada (http://creomiviajeprueba1.blogspot.com/2011/11/prueba-menu-en-estradas.html), y el resultado no es el mejor deseado.

    Me gustaría saber como lograr poner un menu dentro de una entrada. Potro, Gracias por adelantado.

    ResponderEliminar
  85. Hola Tomás Alberto,

    Elimina el código y ponlo de nuevo, pero esta vez ponlo en la pestaña Edición de HTML y no en la de Redactar, pues si lo pones ahí o si cambias la vista a esa pestaña se agregan espacios que son los que ves justamente en el resultado.

    Saludos.

    ResponderEliminar
  86. Hola Potro.

    Muchísimas gracias por tu ayuda, funcionó. Muchísimas Gracias.

    ResponderEliminar
  87. Es un gusto ayudarte Tomás, saludos.

    ResponderEliminar
  88. Hola Potro

    ¿Como se puede poner otro nivel en el menu?

    Algo asi como Pestaña 1 -> Enlace 1 -> Subenlace 1

    Gracias de antemano

    ResponderEliminar
  89. Me temo que no txusberr, como no es un menú hecho con listas ordenadas no lo veo posible.

    ResponderEliminar
  90. HOLA EL POTRO SABES COMO PONER UNA PROGRAMACION EN UNA IMAGEN DE TELEVISOR Y EL MU DENTRO DE LA TV .. YO DEL MENU Y LA PROGRAMACION YA LO SE PERO COMO LE METO ADENTRO Y QUE EL MENU DE CANALES SE HABRA EN EL TELEVISOR AYUDAME QUIERO HACER ALGO IGUAL ENTRA A ESTA PAGINA AHI ESTA http://zonaswryc.host-es.com/h1-progremacion
    HABER SI ME AYUDAS PARECE FACIL -.-

    ResponderEliminar
  91. Hola mahoma, hay una entrada de Oloblogger que habla sobre ello:
    http://www.oloblogger.com/2010/01/enmarcar-videos.html

    ResponderEliminar
  92. Hola
    Me gustaria poner este tipo de menu en mi blog pero he puesto una plantilla en la que no me sale la opcion de "Diseño" asi que no se que hacer para poder ponerla.

    Espero su ayuda, gracias

    ResponderEliminar
  93. Hola Anyuly,

    No mencionas cuál plantilla es y/o cuál blog, pero si es una plantilla de Vistas Dinámicas entonces no se podrá pues en ellas no podemos ingresar a la Edición HTML, ni siquiera podemos añadir gadgets.

    Saludos.

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

    ResponderEliminar
  95. Hola de nuevo
    ya puse una plantilla normal, el caso es que cuando pego el primer codigo el texto de las paginas que tengo horizontales se me desplaza hacia abajo quedando feo, ¿por que ocurre esto?¿que hago para que no pase?
    Gracias

    ResponderEliminar
  96. Hola Potro. Necesito ayuda con este menú. Lo coloque en mi blog, pero en la pagina principañ sale bien, y en las demas paginas estaticas se le cmabia le color al fonde de los desplegables.... Creo que algo he hecho mal...

    ResponderEliminar
  97. Otra pregunta, se puede aumentar el espacio de los desplegables, queda demasido justo al texto.

    Gracias de antemano.

    secretec

    PD: dejo el enlace de mi blog por si interesa echarle un vistazo

    http://blogsecretec.blogspot.com/

    ResponderEliminar
  98. Anyuly, sin saber en cuál blog lo has puesto me es imposible ayudarte :(

    ResponderEliminar
  99. secretec s.c., yo veo el color de fondo de las subpestañas del mismo color tanto en la portada, como en las páginas estáticas, no sé si era un problema que ya pudiste solucionar.
    Para que el texto no quede tan pegado a los bordes agrega debajo de .menu_body a{ esto:
    padding:5px;

    ResponderEliminar
  100. Me ha servido mucho para el menu de mi blog, Potro.


    Saludos

    ResponderEliminar
  101. Gracias Potro, una parte ya esta arreglada!! Llevas razón, no es el color del fondo de las pestañas del submenu, sino el de la letra de los enlaces la que se cmabia de la pagina principal a las otras, pero no, aun no se como arreglarlo... Mira que al abrir los submenus en la pantalla principal, los enlaces se ven, pero si los abro en alguna del resto de paginas, non se ven los enlaces, por el color de la letra

    ResponderEliminar
  102. Jose Antonio Marin Arcas, qué gusto que así haya sido, saludos!

    ResponderEliminar
  103. secretec s.c., de hecho yo veo el mismo color de los enlaces tanto en la portada como en las demás páginas, pero sí, en todas partes el color se confunde con el fondo. Así que debes cambiar el color de esos enlaces donde dice:
    /* Color de los enlaces */

    ResponderEliminar
  104. Me dices que tu no ves cambiar el color de los enlaces en las distintas paginas???
    Me rindo, soy un negado para esto. Ya he desinstalado el menú y todo lo que puse en el html del blog, y lo he vuelto a instalar. Además he vuelto a cambiar todos los colores, y me sigue saliendo el mismo color en los enlaces, y lo sigo viendo diferente en la pagina principal.
    Si quedara como lo veo en la principal seria perfecto, pero se modifica al cambiar de pagina. ¿Puede ser por el navegador?
    Si se te ocurre algo...pues avisame a ver si consigo arreglar esto.

    Gracias

    ResponderEliminar
  105. Pues sólo lo vi en Chrome y los colores de los enlaces se veían todos del mismo color, tanto en la portada como las entradas.
    Lo que creo que ha pasado es esto: las plantillas tienen unos estilos para los enlaces, estos estilos se aplican para tres clases diferentes, uno para cuando un enlace está activo, otro para cuando un enlace ya ha sido visitado, y otro para cuando se pasa el cursor sobre el enlace.
    Lo que yo supongo que es que el color de tus enlaces ya visitados es distinto al de los enlaces activos, y como tú ya habías visitado esos enlaces por eso tú lo ves de otro color.
    Si eso fuera entonces aquí puedes ver cómo personalizar el color de los enlaces del blog:
    http://ciudadblogger.com/2009/04/personalizar-links.html

    Sólo supongo que sea eso, porque entré y ya no lo vi, así que no pude cerciorarme que en otros navegadores se vea de la misma manera.

    ResponderEliminar
  106. En primer lugar comentarte que soy muy novato en este mundo de los blogs, diseño, códigos html, etc., pero con muchas ganas de aprender.
    Estoy empezando a crear un blog y he añadido este menú despegable pero tengo la siguiente duda y no sé cómo hacerlo, mi idea es a cada pestaña denominarlas de la siguiente manera: QUE VER, DONDE COMER Y DONDE DORMIR, y dentro de cada pestaña las subpestañas serían las poblaciones por ejemplo en QUE VER la subpestaña 1 seria CARRION, la subpestaña 2 seria SALDAÑA y así sucesivamente todas las poblaciones que quiera.
    Pero ahora me llega mi problema hoy creo una entrada para mi blog para la pestaña QUE VER, subpestaña CARRION enlazo la url y perfecto, pero llega mañana y creo otra entrada en QUE VER, subpestaña CARRION y necesito que esta url también se habrá desde la subpestaña CARRION como tengo que hacerlo.
    Como puedo poner varias urls en la misma subpestaña, y cuando pinche en esa subpestaña salgan en la misma pantalla todas las entradas.
    Me imagino que será lo más sencillo del mundo pero como ya te digo soy novato.
    Un saludo y gracias por todas las ayudas que me estas proporcionando desde tu blog.

    ResponderEliminar
  107. Hola Chabelo,

    Sí es sencillo en realidad, sólo necesitas ponerle una etiqueta a tus entradas, por ejemplo, a una entrada ponerle la etiqueta "Carrion", luego enlazar la URL de esa etiqueta con el menú, de manera que cuando alguien haga click en la pestaña "Carrion" aparecerán toda las entradas que tienen esa etiqueta.
    Aquí hay una entrada que habla detalladamente sobre ese procedimiento:
    http://ciudadblogger.com/2010/06/menu-de-categorias.html

    Saludos y bienvenido al mundo de los blogs :)

    ResponderEliminar
  108. Hola de nuevo Potro!! Me ha costado un blog nuevo, pero he conseguido colocar el menu con los colores de letras que queria. Lo que no he sido capaz de cambiar es el color del fondo de los enlaces, pero bueno, he arreglado todo lo demas para que encaje ese...jejeje.

    Gracias de nuevo

    ResponderEliminar
  109. Ah que se me olvido ponerte el enlace del nuevo blog, y pregunatre una cosilla:
    ¿Es posible que el texto de las pestañas principales sean también un enlace? Es decir, que al pinchar en una de las pestañas principañles me abra una pagina con ese nombre.

    EL nuevo blog:

    http://secretec-servicios-empresariales.blogspot.com/

    gracias

    ResponderEliminar
  110. Debería poderse, prueba cambiando la parte de la pestaña, es decir esto:
    <p class="menu_head">Pestaña 1</p>

    Por esto:
    <p class="menu_head"><a href="URL del enlace">Pestaña 1</a<</p>

    ResponderEliminar
  111. Hola de nuevo Potro!! Ya he puesto el menu completo como me indicaste, y todo perfect por fin!Ahora me pongo con algo mas.

    Una cosa extra, he puesto una consulta e otro hilo, de un menu horizontal, y ahora no localizo el hilo. Puedes ayudarme? Es el menu horizontal que he puesto en mi blog.
    Gracias de nuevo

    ResponderEliminar
  112. Aquí está la entrada:
    http://ciudadblogger.com/2010/07/menu-horizontal-drop-and-down-con-css.html

    Saludos!

    ResponderEliminar
  113. Hola de nuevo potro!! Me gustaría reducir el tamaño de los gadgets que instalo directamente de blogger, no se si me podras ayudar.

    Ya se que esto no es de este hilo, pero es que no se donde ponerlo.

    Gracias!!

    ResponderEliminar
  114. Hola secretec s.c., ¿te refieres al ancho? el ancho se adapta al ancho que tenga la sidebar y eso se modifica desde el diseñador de plantillas. El alto igual se adapta según el gadget, a menos que te refieras a otra cosa.

    Saludos.

    ResponderEliminar
  115. Pues me refiero al alto.

    Si entras mi blog (http://secretec-servicios-empresariales.blogspot.com/ ), en la parte baja, veras los gadgets de seguidores y de datos personales, que los he puesto en la barra iferior con el diseñador de blogger. Ves que altos son, no se puede reducir ese espacio??

    ResponderEliminar
  116. Lo que pasa es que el gadget de Seguidores tiene esa altura, si quitas ese gadget o si lo pones en la sidebar verás que se reduce ese espacio.

    ResponderEliminar
  117. Bueno, otro repasito al menu vertical. Ahora no se recogen las pestañas. Bueno, nunca se recogieron, pero antes me preocupaban mas otras cosas.Se pude hacer algo??

    ResponderEliminar
  118. Nunca se recogen, sólo lo hacen si pasas por otra pestaña, así es el menú.

    ResponderEliminar
  119. Buenas noches, bien resulta que en la noche de hoy me ha salido un leve problemilla con el menu. Hoy no me despliega...Ya he verificado que los cods esten bien, los he cortado y repegado en repetidas ocasiones y nada...no pasa nada! Potro serias tan amable de ayudarme?

    ResponderEliminar
  120. Hola Yaro,

    Es posible que hayas agregado otro script que sea incompatible con este, pero necesitaría saber en cuál blog tienes el problema para así confirmarte si es ese el problema u otro.

    Saludos.

    ResponderEliminar
  121. Hola Potro :)

    Bien este es el blog http://yarosapchronicles.blogspot.com/ sin embargo, esta mañana desde el pc de mi trabajo he notado que si funciona el menu, pero desde mi laptop no...Que podria ser?

    ResponderEliminar
  122. Quizá es tu navegador Yaro porque desde aquí también funciona tu menú a la perfección.

    ResponderEliminar
  123. esta buenisimo pero solo que no me decido en donde me quedara mejor

    ResponderEliminar
  124. una pregunta ! no saves como ponerlo en una pagina web como la de jimdo?? espero tu respuesta aldo.vm@hotmail.com

    ResponderEliminar
  125. No conozco esa plataforma, todo lo que hay aquí sólo lo pruebo en Blogger.
    Saludos.

    ResponderEliminar
  126. Son excelentes todos los menús. Es probable que pruebe el horizontal que son los que me gustan.

    Por ahí he visto una barra flotante que cuenta con varios iconos de redes sociales yo los iconos los tengo lo que querria conseguir es la barra sobre la cual están o estarian los iconos. Si sabes de algo me lo cuentas mil gracias tanto por los menús como por esto que te pido en segundo lugar.

    Excelente blog!

    ResponderEliminar
  127. Hay una barra de herramientas por aquí, no sé si es la que mencionas:
    http://ciudadblogger.com/2010/11/barra-de-herramientas-flotante-con.html

    Gracias por tu visita!

    ResponderEliminar
  128. Esa barra a la había visto. Es parecida solo habria que modificar el ancho y el alto de la barra y quitar el suscribirse e introducir en ella todos los botones de redes.

    La que te digo podrás verla en el periodic (http://www.elperiodic.com/ )" es simpática más que útil"

    ResponderEliminar
  129. Pues sí está simpaticona, quizá no te quede exactamente igual, pero con la misma barra que te digo puedes hacer las modificaciones que has mencionado, así podrías conseguir simplificarla un tanto.

    ResponderEliminar
  130. buenos dias potro excelente aporte pero como siemrpre tengo una duda yo coloque esos menu y me quedaron expectaculares pero como les coloco informacion adentro osea como en las paginas que vienen por defecto en bloger que al darle click me lleva a la informacion es decir si es de contacto me lleva a la informacion de contacto como hago eso en estos menus no se si me estas entendiendo este es mi correo principal jeenalper@hotmail.com
    soy seguir de tu explicaciones espero respuesta

    ResponderEliminar
  131. Hola Casting Venezuela,

    Sólo necesitas poner en la URL del enlace la dirección de la página que quieres mostrar, en este caso de las páginas estáticas de Blogger.
    Si no conoces la URL de estas páginas entra a una de ellas, y en la barra de direcciones del navegador verás la URL de esa página, esa es la que debes poner en el menú.

    Saludos!!!

    ResponderEliminar
  132. Hola Potro, con respecto a la entrada de "Menú vertical desplegable tipo acordeón con jQuery", quiero poner las letras mas grandes donde dice "Pestaña 1" "Pestaña 2" etc, quiero poner mas grandes las letras pero en el codigo no veo donde realizarlo.

    Gracias por tu apoyo

    http://www.ex-entretenimiento.com/

    ResponderEliminar
  133. Hola zetsu187,

    Agrega debajo de .menu_head { esto:
    font-size: 18px;

    Con eso tendrás una letra más grande, y podrás modificarla por otro tamaño si lo deseas.
    Saludos!

    ResponderEliminar
  134. Hola Potro. Gracias por toda la buena información que nos brindas.

    Respecto a este post. Podrías decirme como agregar una nueva pestaña (pestaña 4) con su url correspondiente pero sin subpestañas. Que sea sólo una opción.

    Otras cuestión que no tiene que ver con este postñ. Sabés como puedo hacer para que no se oscurezcan los archivos swf al verlos en Chrome. Es un problema de Chrome o tendré que hacer algo en Flash.

    Gracias y saludos!

    ResponderEliminar
  135. No sabría decirte Gonzalo, yo siempre veo los SWF igual en todos los navegadores.
    En cuanto a la pestaña sólo añade antes del DIV azul este código:
    <p class="menu_head">Pestaña 4</p>

    Con eso debe aparecer otra pestaña sin subpestañas.
    Saludos.

    ResponderEliminar
  136. ¿Cómo haces para poner los ejemplos dinámicos? Es que hago un blog con ayudas de blogger y web, de cosas que uno a veces no encuentra y por azares encuentra en distintos puntos, trato de juntar esa info... de esas cosas difíciles, acá en Ciudad Blogger he encontrado muchas que no encontraba en otros lados... gracias por tu respuesta.

    ResponderEliminar
  137. En algunos casos uso iframes Mili, de esa manera no interfiere el gadget con nada más del blog.
    Saludos.

    ResponderEliminar
  138. Potro, he puesto este por que este usa jQuery, pero... mira como se ve:

    http://milesdeeuros.blogspot.com/

    Puedo hacer algo para que no aparezcan esos triangulos?

    ResponderEliminar
  139. Andersj, lo que no entiendo es porque has puesto diagonales en varias propiedades, por ejemplo:
    width: /180px;/

    ResponderEliminar
  140. Ui, que fallo, ya lo he quitado y se ve bien, gracias

    ResponderEliminar
  141. ¿Puedo aplicar esta funcionalidad de menú desplegable al menú (gadget de páginas) que ya tiene mi plantilla?

    http://woskone.blogspot.com

    ResponderEliminar
  142. No, tienes que eliminar el gadget de Páginas, y poner este realizando todos los pasos que se indican.
    Saludos.

    ResponderEliminar
  143. Potro: Se puede cambiar el tipo de letra (tipografía) que se utilizan para los titulos en el menú?

    Gracias

    ResponderEliminar
    Respuestas
    1. Claro, debajo de .menu_head { agrega los estilos que quieras para esa área, por ejemplo:
      font-family: Impact;

      Eliminar
  144. Hola disculpa pero como puedo insertar este menu en una pagina hecha con wordpress.

    Gracias

    ResponderEliminar
  145. hola potro, que debo retocar en el código para que el menu se cierre automáticamente cuando dejo de pasar el cursor por el mismo.

    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Me temo que no se puede, al menos yo no veo la forma de poder hacerlo, también lo intenté antes de publicarlo :/

      Eliminar
  146. que bueno!!
    lo usare cando publique mas XD

    ResponderEliminar
  147. Epale amigo disculpa hace un tiempo atrás yo tuve molestándote por que tenia muchos problemas con un blog no se si recuerdas, bueno e vuelto a crear un blog y lo estoy editando.. trate de dejarte el mensaje en contacto pero dice que hasta el 1 de febrero y bueno al grano.
    Amigo mira este es mi blog http://altamiramusictk.blogspot.com/ bueno me gustaría saber si tu sabes como puedo editar el titulo del headline quiero que quede así mira http://alofokemusic.net/v2015/ osea la imagen y al lado el titulo.. si no es mucha molestia te agradecería si me pudieras ayudar.. Disculpa la molestia amigo y espero tu respuesta

    ResponderEliminar
    Respuestas
    1. ¿Te refieres al gadget del slider? Porque si es así ahí hay un problema, que el título no tiene especificado ningún ID o clase, por lo tanto no hay forma de poder aplicarle estilos para que se acomode en otro lado.
      Por ejemplo, en la otra página, el título está encerrado con un <div class="title">, eso permite que se le pueda aplicar un estilo para ese elemento, pero en el caso de tu plantilla no lo tienes, así que no hay manera de hacerlo.

      Eliminar
  148. Mmm, yo trate y trate incluso puse en #headline el text alineado a la izquierda pero solo se movia la parte de arriba del titulo si el titulo era muy largo lo demas no se movia y por eso no pude y si no hay manera pues que mas gracias potro por tu pronta respuesta(Y)

    ResponderEliminar
    Respuestas
    1. El #headline es sólo para la parte de arriba, pero el título de la entrada necesita estar encerrada como te dije, sino no se puede mover de lugar.
      Saludos.

      Eliminar
  149. Hola potro, mi consulta es la siguiente:

    Cuando modifico el tamaño de letra de los enlaces del menú, se me modifican todos los enlaces que aparecen en otras partes del blog, como por ejemplo el enlace a la página de Blogger en las atribuciones. ¿es posible manejar el tamaño del texto de cada sección por separado?

    Gracias por tu ayuda.

    ResponderEliminar
    Respuestas
    1. Hola Vanessa, eso no debería suceder, ¿cómo lo estás haciendo?
      La forma correcta de cambiar el tamaño de la fuente de este menú, es agregando debajo de:
      .menu_list {

      Esto:
      font-size: 14px;

      Saludos.

      Eliminar
    2. Gracias por tu ayuda, ya lo resolví.

      Y gracias por tu blog, que ha sido de mucha utilidad para todos nosotros.

      Saludos.

      Eliminar
  150. se puede usar este codigo en una pagina que no sea un blog??

    ResponderEliminar
    Respuestas
    1. Sí chinchapapa, también funciona en una página Web.

      Eliminar
    2. vale, hecho. muchas gracias, muy buen aporte...lo unico, no se en un blog, pero si lo usas en una web, hay que cerrar el primer script que esta sin cerrar...
      muchas gracias.

      Eliminar
    3. Sí está cerrado, la diagonal al final indica su cierre, pero hay plataformas que necesitan la etiqueta completa de cierre :)

      Eliminar
  151. Potro En Blog No Sale http://eduardo-santos-marulanda.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Eduardo, no veo que tengas puestos los códigos del menú en ese blog.

      Eliminar
  152. Dios, me encantas.
    Todos tus posts me sirven de gran ayuda. *-*

    ResponderEliminar
    Respuestas
    1. Hola Potro:
      He instalado el menú en mi blog.
      Uso las subpestañas para linkear música.
      Pero al abrir el menú aparecen unos triangulitosjunto con el link y no se como sacarlos.
      Si me das una idea de como hacerlo muy agradecido.
      Alberto.

      Eliminar
    2. Hola Alberto. En esas plantillas da ese problema, quizá lo mejor es que quites del primer código las dos URLs que terminan en abajo.png
      Se perderá la flechita de abajo pero será la mejor opción.
      Saludos.

      Eliminar
  153. Hola, te había escrito en enero por el problema que tenía con las subpestañas de un menú horizontal, que no se deslizaban correctamente. Opté por quitar ese menú y lo pasé al estilo vertical tipo acordeón, siguiendo tus consejos y ya lo había puesto en practica anteriormente.
    Todo ok, salvo por el hecho de que al existir otro menú vertical tipo acordeón el segundo menú no se desplaza. Pero ¡ojo! porque ese problema sólo me aparece en IE9, en mozilla se ve perfecto. Bueno, intruseando en los comentarios de esta entrada encontré la solución que diste al copiar de nuevo el código después de head y ¡GRACIAS!! porque al fin mi blog funciona con ambos menús. Sólo espero que al agregar otro menú similar no vuelva a suceder lo mismo...Y que alguien de otro mundo pueda encontrar las soluciones a todos los problemas que nos da IE en todas sus malas versiones.

    Saludos y agradecida.

    ResponderEliminar
    Respuestas
    1. Hola Sandra.

      Qué raro que sólo en IE se den esos problemas, jeje :P
      Me alegra que estés contenta con los menús que tienes y ahora, y más aun, que ambos estén funcionando perfectamente bien :)

      Saludos.

      Eliminar
  154. Gracias Potro,hice lo que me indicaste y quedó muy bien el menú.
    Te molesto para que me ayudes a cambiar el color de las teclas del menú y las letras.
    He sustituido los seis dígitos que aparecen despues del signo numeral en el código y no me cambia nada.
    Gracias otra vez.

    ResponderEliminar
    Respuestas
    1. Así como mencionas se cambia Alberto. Ahora mismo he entrado pero no veo códigos distintos a los de esta entrada.

      Eliminar
  155. Es que dejé los valores originales de nuevo.
    Los colores de fondo cambian sin problema,pero el color de las letras no.
    Por ejemplo,el color de las letras al pasar el cursor está configurado en negro y permanece en rojo.
    Seguramente estoy haciendo los cambios en el lugar equivocado.
    Gracias.

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

    ResponderEliminar
  157. ¡POTRO! me encanta el recurso pero tengo un gran problema :( tengo una nivo slider tambien de Jquery lo que sucede es que la nivo tambien tiene esta clase de código
    script

    src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'

    entonces ocurre un ERROR y no me sirve la nivo, mire bien y si quito ese código del menú vuelve a servir la NIVO pero ya no sirve el menuuu :( ¿que hagooo? este recurso es lo que realmente necesito.. AYÚDAME, GRACIAS..

    ResponderEliminar
    Respuestas
    1. Hola Alyssa. Prueba dejar sólo la última versión de jQuery, tal vez eso funcione, digo tal vez porque a veces los plugins de jQuery no son compatibles entre sí:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Eliminar
    2. NO, imposible cargue la ultima versión y sigue igual solo sirve uno de los dos recursos, ni modos!! NO podrías ayudarme o decirme si conoces otro menú igual a este que no sea de jQuery?? ¡¡PORFAVOR!! Gracias por tu ayuda, y tus post son los mejores.

      Eliminar
    3. Pues debe de haber, pero sólo conozco este :(

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
  158. ¡Muchísimas gracias por este truco!
    No sabía como crear un menú de categorías en Blogger y me lo has arreglado.
    Ahora ya tengo mis categorías organizaditas y eso que soy una inepta en HTML.
    Cheers!!

    ResponderEliminar
  159. y si quisiera agregar una sub-sub pestaña .... seria mucho pedir .??

    ResponderEliminar
    Respuestas
    1. El menú no tiene esa opción Juan Opazo. Saludos.

      Eliminar
    2. bueno igual creo que es mucho pedir por el momento
      gracias de todas maneras esto lo buscaba hace mucho
      tenia un menu desplegable pero con etiquetas
      esto es mucho mejor
      muchas gracias

      Eliminar
  160. hola..... se puede poner una imagen en lugar de Pestaña 1, Pestaña 2, Pestaña 3, etc??? por ejemplo, para que quede como en esta página http://www.vero4travel.com/, si miras a la derecha hay un menú llamado "Temas generales de viajes"...... gracias...

    ResponderEliminar
    Respuestas
    1. A este menú sólo tendrías que poner antes del nombre de la pestaña el código de la imagen que quieres:
      <img src="URL de la imagen" />

      Eliminar
  161. hola.... buenísimo, ya logré ponerle la imagen delante del nombre de las pestañas...... ahora si miras el blog (http://www.deviajeporahi.com) verás que los nombres de las pestañas no me quedan centradas verticalmente con respecto a la imagen.... he probado con las mismas imágenes en tamaño más grande y más pequeño, y nunca queda centrado verticalmente el texto, siempre se alínea abajo (verticalmente).... y además me gustaría "separarlo" un poco más de la imagen (en el sentido horizontal), no sé que parámetro tengo que tocar para hacer esto, lo intenté con "padding" pero no lo he logrado..... muchas gracias...

    ResponderEliminar
    Respuestas
    1. Hola German. Aplica estos estilos dentro del código de la imagen:
      style="vertical-align: middle; margin-right:15px;"

      Eliminar
  162. exelente pero como le pondria in icono aci como el de youtuve

    ResponderEliminar
  163. Hola Potro, como veras en mi Blog tengo integrado un menú y la verdad que quiero desaparecerlo y cambiarlo por un listado de etiquetas (parecido al tuyo) porque el de Blogger no cae muy bien.

    Si me pudieras enseñar como hacerlo de esa forma u otra estaría genial.

    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Juan[Br], como el mío hay varias formas, una es que crees dos listas, a una le das una flotación izquierda y a otra una flotación derecha. Otra opción es que crees una tabla HTML, en ella puedes ir poniendo los enlaces, así tendrás dos columnas de enlaces.

      Saludos.

      Eliminar
  164. Muchas gracias; ha sido de estudpenda ayuda.

    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.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger