33 Comments

  1. Hatsu
    17 noviembre, 2018 @ 19:32

    Hola, me gusta tu página. Aún no he empezado el tuto pero, ¿es el mismo menú que llevas en tu web? Porque ese es el que busco.

    Reply

    • Carmen Ferreira
      22 noviembre, 2018 @ 19:54

      No ese es un menú para blogger, este blog está hecho en wordpress, además esta barra de menú lleva JS para parar un camión.
      Es como en el ejemplo más sencilla pero está bastante bien y es una barra de menú fácil de hacer.
      Saludos

  2. Marta
    21 febrero, 2018 @ 12:20

    Hola de nuevo Carmen, soy la misma del comentario anterior. Estaba personalizando el CSS para adaptar la barra a mi blog y hay algunas cosillas que no consigo (siento que no puedas verlo pero hasta que no esté terminado lo tenemos en privado). Espero poder explicarme bien:
    – Color y tipo de fuente de las categorías con subcategoría. Esas letras me aparecen diferentes al resto tanto en fuente, como en tamaño, como en color. Sospecho que viene determinado por la configuración de mi plantilla (sencilla de blogger, la misma blanca en la que tú haces la prueba) pero no doy con la tecla para modificarlo.
    – Ancho de la barra. Quería poner la barra tan ancha como el blog, he conseguido hacerla más ancha ajustando el padding de los botones, pero sospecho que no es el mejor método, porque no consigo que ocupe todo el ancho y además los botones de las subcategorías ahora quedan demasiado estrechos con respecto al botón del que nacen.
    – Botones de Categoría con subcategoría, tienen arriba y abajo una línea blanca que tampoco consigo eliminar. Sospecho que tiene el mismo origen que el primer problema..

    Te agradezco si pudieras ayudarme,

    Un saludo,

    Marta

    Reply

    • Rocio
      18 abril, 2018 @ 03:33

      Hola, no se si me leeras. A mi tambien me pasa, las categorias con subcategorias se editan de manera diferente… hay que combinar los ajustes de la plantilla con los ajustes de css. El problema que tengo es que no puedo quitarle las negritas a las subcategorias y tambien me sale como un ligero sombreado. Voy probando y poco a poco voy consiguiendo lo que quiero..la verdad es que esta es de las pocas plantillas que me han ido bien. pero me falta personalizar pequeños detalles.

  3. Marta
    21 febrero, 2018 @ 11:47

    Muchísimas gracias por el tutorial. Había probado ya varias y en todos se me quedaba el menú desplegado aunque modificase el CSS. Con el tuyo me ha funcionado perfecto así que mil gracias!

    Reply

  4. daniela ovalle
    3 octubre, 2017 @ 04:18

    Hola! Muchas gracias por tu página, es de gran ayuda. Pero como a otras le ocurrió, se me ve todo desordenado el menú. Puse luego el otro código que pusiste en uno de los comentarios, pero ahora solo cambió el color, sigue sin verse desplegable. Qué puedo hacer?? Plis ayuda!!!
    Este es mi blog workandholidayenaustralia.blogspot.com

    Gracias de antemano!

    Reply

  5. Desireé
    15 septiembre, 2017 @ 12:36

    Buenas!! He logrado que todo me salga como debería de salir en mi blog, salvo una cosa. ¿Cómo puedo hacer que en la pestaña donde esté se quede de color? Lo que quiero es que el lector sepa, con tan solo mirar al menú, en qué pestaña está concretamente.

    Muchísimas gracias por hacer fácil lo difícil.

    Un saludo.

    Reply

  6. Emily P. Rodriguez
    20 julio, 2017 @ 16:53

    hice todo como lo dijiste pero me sigue saliendo igual, todo desordenado como si no hubiese añadido los códigos css. Que hago? mi tema es sencillo y aun así no agarra. Por favor necesito ayuda! tengo demasiado tiempo tratando de hacer un menú desplegable y nada que me sale.

    Reply

    • Carmen Ferreira
      20 julio, 2017 @ 22:54

      Hola Emily hay un fallo que he corregido debes cambiar en el menú esta línea

        por esta:
        Un saludo

  7. José
    28 febrero, 2017 @ 19:24

    Hola! Me encanta tu blog, es muy bueno.
    Hice todos los pasos que detallas aquí y el menú me queda hecho, se despliega y todo. Pero tengo un inconveniente, no puedo cambiarle el color ni el tamaño a las desplegables del menú horizontal. Si pudieras pasarte por mi blog para que me ayudes a solucionar este problema.
    Muchas gracias!
    Un saludo!

    Reply

    • Carmen Ferreira
      28 febrero, 2017 @ 23:17

      Hola José, siento que no te haya contestado pero normalmente no me pongo con los comentarios mucho tiempo porque trabajo muchas horas y tengo poco tiempo libre, gracias por tus amables palabras, a mí en el inspector de propiedades me deja cambiarlo, qizás luego en vivo tengas alguna clase de la plantilla que lo sobre-escriba.
      A mí me ha funcionado esto, en realidad está diseñado para que el menú tenga tanto como el submenú para no complicar la vida haciendo más clases y selectores.
      El color del menú desplegable es este
      .tabs-inner .widget ul#ybmenud li ul li:hover {
      background: #1c5c88;
      }

      si quieres cambiar el desplegable de tamaño cuando pasas por encima es aquí, ojo he puesto los colores que he querido y el tamaño muy pequeño, seguramente te haga un efecto gracioso por los 2 px de padding.

      .tabs-inner .widget ul#ybmenud li ul li:hover {
      background: #1c5c88;
      padding-top: 2px;
      padding-bottom: 2px;
      }

      Quizás más adelante haga oto menú más complejo con los submenús diferentes con más clases, espero que te sirva.
      Lo del Spam no te preocupes, es que modero los comentarios antes de publicarlos porque me fríen a enlaces y a spam verdadero.
      Un saludo!!

    • José
      6 marzo, 2017 @ 01:12

      Muchísimas gracias por la ayuda! Un saludo! 😀

  8. José
    28 febrero, 2017 @ 07:06

    Hola Carmen, hace ya varias semanas que vengo batallando con los menús desplegables de mi blog, he seguido todos los pasos que dices aquí, se despliega y todo, pero no puedo cambiar el tamaño ni el color para que quede igual que los otros en el menú horizontal. Un saludo!

    Reply

  9. Laura
    18 febrero, 2017 @ 11:47

    Hola Carmen!

    gracias por tu artículo, llevaba días buscando como hacerlo en la red pero ninguna de las soluciones que encontraba me resultaban, he implementado la que tu das, he cambiado los colores de acuerdo a mi blog pero tengo una pequeña duda… probablemente sea algo super sencillo que me he dejado atrás.

    Cuando se abren las pestañas desplegadas, la letra me sale en negrita, es decir la barra de pestañas está con fondo blanco y la letra negra normal, pero las pestañas que se despliegan salen con fondo blanco y la letra en negro pero en negrita…

    Debo tocar algo en lo que tú nos has puesto para pegar en css?

    Aún así, enormemente agradecida!!!

    Reply

  10. Marisa Doménech
    7 febrero, 2017 @ 19:35

    Lo acabo de implementar en mi blog. Muchas gracias, Carmen, el post me ha sido de gran ayuda.
    Un abrazo

    Reply

    • Carmen Ferreira
      7 febrero, 2017 @ 19:42

      Que pasada te ha quedado genial!!, funciona perfectamente, eres una fenómena! un abrazo

  11. gabriela
    14 enero, 2017 @ 05:33

    Hola, muchas gracias por tu blog,es de mucha utilidad. Me encanto este post.

    Sabes que he intentado esto, seguí todos tus pasos pero no lo logro 🙁 las subpestañas no se unen a una pestaña unicamente, si no que están todas separadas 🙁
    ¿podrías ayudarme? muchisimas gracias de antemano.

    Reply

    • Carmen Ferreira
      14 enero, 2017 @ 22:27

      Se solapan los estilos css tu tienes este de tu barra de menú y es normal que tengan conflicto, este es el que tienes en tu tema, no aparece el del post por ninguna parte, asíq ue creo que no lo has puesto.
      Esta barra es bastante compatible pero puede no serlo con muchos temas.
      /* Tabs
      ———————————————– */
      .tabs-inner .section:first-child {
      border-top: 0 solid #eeeeee;
      }
      .tabs-inner .section:first-child ul {
      margin-top: -0;
      border-top: 0 solid #eeeeee;
      border-left: 0 solid #eeeeee;
      border-right: 0 solid #eeeeee;
      }
      .tabs-inner .widget ul {
      background: #f5f5f5 url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;
      _background-image: none;
      border-bottom: 1px solid #eeeeee;
      margin-top: 0;
      margin-left: -30px;
      margin-right: -30px;
      }
      .tabs-inner .widget li a {
      display: inline-block;
      padding: .6em 1em;
      font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
      color: #999999;
      border-left: 1px solid #ffffff;
      border-right: 1px solid #eeeeee;
      }
      .tabs-inner .widget li:first-child a {
      border-left: none;
      }
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      color: #000000;
      background-color: #eeeeee;
      text-decoration: none;
      }

  12. Jaime
    10 enero, 2017 @ 18:54

    Hola!!

    Tengo el mismo problema que Patricia, cuando voy a acceder a una subcategoría no lo consigo porque desaparece, pero no entiendo la solución que hay para el problema de Patricia. ¿Me puedes ayudar?

    Reply

    • Jaime
      10 enero, 2017 @ 19:10

      Jajajaja acabo de solucionarlo trasteando con el código del CCS, perdón por la molestia. Estaba demasiado lejos del apartado desde el que se desplegaba, con lo que al bajar el ratón pues salía del menú y por lo tanto no abría el submenú.

      Muchas gracias igualmente jajaja

  13. Patricia
    30 diciembre, 2016 @ 17:04

    Hola!!
    Tengo un problema con el menú despegable, cuando quiero pinchar en una de las subcategorias, el desplegable desaparece, por que puede ser?

    Gracias.

    Un saludo.

    Reply

    • Carmen Ferreira
      31 diciembre, 2016 @ 12:09

      Esto se debe a que cad tema tiene unos estilos que pueden sobreescribir otros hay veces que colocas un código y milagro!! sienta como un guante o ocurren cosas raras, en tu caso era eso que no sentaba bien y hacía esta pifia, sustituye los códigos:

      Hola en la línea 478 cambia :
      display: block ; por display: inline;
      En la linea 485:
      cambia margin: 6px;
      En la lineaa 472 cambia el padding:
      padding: 8px 12px 8px;
      En la línea 486 cambia:
      width: 200px;
      margin: 0px;
      padding: 0;
      En la línea 450 cambia:

      background: rgba(255, 255, 255, 0);

      A mí se me veía muy chulo!! mucha suerte con tu blog!!

  14. Jonathan
    10 noviembre, 2016 @ 11:11

    Hola, gracias por el post, muy bueno.

    He intentado ejecutar todos tus pasos, pero ya con la primera parte, la vista previa de mi blog no es la adecuada, y aunque sigo hasta el final, eso no cambia. Es como si la plantilla que utilizo no dejara hacer ese menú desplegable, y los estilos y colores ya están fijado.

    ¿Podrías ayudarme por favor?. Mi blog es:laaventuradeldragon.blogspot

    Como ves, la parte de páginas en negro, debajo del logo, es lo que quiero poner en desplegable:
    1ª opción (el que intenté sin conseguir): Asia y despliega países, Oceanía y despliega países (2 niveles).
    2ª opción (la que me gustaría): Países, despliega sólo Asia y Oceanía, y éstos, a su vez, despliegan sus correspondientes países (3 niveles).

    Si te parece y me das tu correo, te puedo enviar la vista previa de cómo quedaba tras ejecutar los pasos, por si con ello te puedes hacer una mejor idea del problema.

    Gracias. Un saludo

    Reply

    • Carmen Ferreira
      14 noviembre, 2016 @ 21:40

      Los tutoriales son sencillos y por lo que veo es esto lo que te ocurre que no tienes hecho nada en el html lo tienes como una lista te dejo como debería ir para que veas como es la estructura del menú, en dónde pone clase tienes que poner la clase de css que has creado para ese elemento.
      Por cierto lo he sacado del spam porque has dejado un enlace y eso no se hace jajaja.
      Muy interesante tu blog!
      codi

  15. Alejandra Alcala
    18 junio, 2016 @ 05:19

    Buenas noches encontre este post y por mas que lo intento creo que mi plantilla me impide hacer cambios, ya que solo he llegado al paso donde las pestañas están hechas un desastre y por más que cambio código nada sucede. Podrías revisar mi blog y ver si estoy haciendo algo mal por favor? Te lo agradecería mucho

    Reply

    • Carmen Ferreira
      18 junio, 2016 @ 06:47

      Lo acabo de ver y no está mal lo único que las pestañas montan sobre el cuerpo cambia esto en la plantilla,
      busca esto :
      main-inner

      Te encontrarás esto:

      .main-inner {
      padding-top: 15px;
      }

      Y lo sustituyes por esto:

      .main-inner {
      padding-top: 40px;
      }

      Por cierto muy bonito tu blog!!

  16. Maite
    18 mayo, 2016 @ 02:32

    Hola, me encanto el post, muy útil. Y necesito ayuda, ya que por alguna razón, creo que hice algo mal, o no se, pero las subcategorias no se plegan T.T

    Reply

  17. Nuria
    9 abril, 2016 @ 16:10

    Hola:
    Aprovecho este espacio para darte la enhorabuena por los consejos y tutoriales que das. El próximo que voy hacer es el del menú desplegable.
    Muchas gracias por dar estos tutoriales a conocer. Me gustaría que te dieras una vueltecita por mi blog a ver que te parece.
    Un abrazo

    Reply

  18. Pablo
    23 marzo, 2016 @ 23:03

    Tengo un error con el menú donde solo se ve la primera subcategoría, que podría ser?

    Reply

    • Carmen Ferreira
      23 marzo, 2016 @ 23:33

      Hola Pablo muy sencillo que tu plantilla no permite el desplegable sobre el contenido, si ves se corta sobre el contenido, eso es porque no has insertado bien el widget, de todas formas no se parece a la plantilla del ejemplo… por lo que creo por lo que he podido ver deberías probar a situar el espacio del widget mas arriba por que está demasiado anidado dentro de otros div y por ello no puede desplegarse. debe de ir bajo el header.

  19. Pablo
    23 marzo, 2016 @ 22:29

    Buenas, muchísimas gracias por la guía, esta demasiado bien explicada. Solo tengo un problema, a la hora de pasar el mouse en el menú, solo se ve la primer subcategoría, no se por que podrá ser.

    Reply

  20. Maria
    29 septiembre, 2015 @ 10:48

    ¡Hola Carmen!

    Lo primero, darte mil gracias por este post que, de verdad, me ha salvado la vida y segundo por hacerlo tan pronto!! En cuanto recibí ayer el email que me avisaba de que habías colgado el post me levanté corriendo de la cama a ponerme manos a la obra. Reconozco que entre personalización y detalles se me hizo de noche pero… ¡¡¡qué ilusión!!! Aún ando dándole vueltas pero esto ya parece otra cosa…
    Lo único que, aunque imagino que será un poco parchecillo, para que desde cada subcategoría saliesen todos los post relacionados, lo único que se me ocurrió fue asignarles una etiqueta en mi backend y redireccionar el «click» de la subcategoría a la dirección de la etiqueta (blog/label/ETIQUETA)… Lo mismo es una chapucilla pero me siento ahora mismo toda una programadora profesional gracias a ti ^^

    Un abrazo y, de nuevo, millones de gracias!!

    Reply

    • Carmen Ferreira
      29 septiembre, 2015 @ 14:53

      Has visto que velocidad! y queda un efecto parecido a la de este blog pero mil veces mas ligero (yo la cambiaba por esa y no te digo que no lo haga….) Claro se hace así mediante las etiquetas en blogger hacen las veces de subcategorías así que has triunfado. Perfecto!!
      Me alegra que te guste! al final vas a tener un pedazo de blog impresionante hecho a mano casi entero por tí! como mola!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Pin It on Pinterest

Share This