Crea un menú desplegable responsive para Blogger

11.3.16



Si tienes tu plantilla Blogger personalizada con un menú superior fijo y te gustaría mantenerlo en la versión móvil con este tutorial lo conseguirás. En unos pocos pasos tendrás el típico menú con tres rallitas (menú hamburger) que te permitirá mostrar cómodamente las categorías de tu blog en un clic. Y lo mejor: admite subcategorías.



Desde hace relativamente poco he renunciado a utilizar las plantillas por defecto de Blogger, algun día os explicaré mis razones. Pero hay una cosa que no le puedo negar: las posibilidades de personalización que admite la plantilla simple de Blogger, sobretodo por la cantidad de tutoriales que hay para ello. Pero rebuscando en Google no he encontrado muchos que permitan darle un aspecto más moderno al menú de la versión móvil que nos da Blogger, bastante feo dicho de paso.

Pero por fortuna encontré un tutorial que nos ofrece un menú sencillo de implementar y que funciona bastante bien. En muchos de los menús responsives se utilizan instrucciones jquery que implican aumentar un poquito el tiempo de carga. En cambio el código de éste tutorial funciona simplemente mediante CSS, sin necesidad de generar links externos o instalar iconos o imágenes. Es tan sencillo como añadir el código HTML de tu menú y unas cuantas líneas en los estilos CSS de tu plantilla.

El tutorial en cuestión pertenece a una serie completa para hacer responsive un blog de Blogger, iniciada en el 2013 por el blog My Blogger Tricks. El sumario completo lo tienes en esta entrada. Si accedes y pruebas su demo verás que es un menú correcto pero yo diría que un poco desfasado de diseño.

Partiendo de este código he dado un nuevo aspecto al menú, más neutro y elegante. Puedes comprobar su funcionamiento y aspecto desde mi blog de pruebas, que lleva instalada la plantilla simple blanca de Blogger. Para simular la vistas en móvil / tablet estrecha el ancho de tu navegador, cuando llegue a valores inferiores a 800px las categorías desaparecen y aparece un menú desplegable con el icono de las tres barritas típico. Recuerda que para que salte la versión móvil de Blogger debes añadir ?m=1 al final de la URL
 

¿Te animas a instalarlo? Pues sigue los siguientes pasos:

1. Crea una copia de seguridad de la plantilla de tu blog.

Imprescindible antes de realizar cualquier cambio en la plantilla. Un simple error, una etiqueta mal cerrada por ejemplo, puede arruinarla. Si esto pasase  la solución será tan simple como volver a instalar la copia de seguridad .


Desde el panel de Blogger ve a Plantilla, clica en Crear/restablecer copia de seguridad. En la ventana emergente clica en Descargar plantilla completa. Guarda a buen recaudo el archivo descargado. En caso de necesidad, para restablecer la copia se instalará desde el diálogo inferior de la misma ventana.

2. Habilita la vista movil personalizada


Este menú te permite utilizarlo con la vista móvil de Blogger personalizado. Para ello desde el mismo panel Plantilla clica sobre el icono en forma de rueda bajo la versión móvil. En la ventana emergente escoge la opción Sí, mostrar la plantilla para móviles, y en el desplegable inferior selecciona Personalizado.

3. Crea el menú en HTML


Ahora entra en el modo de edición de la plantilla HTML clicando en el botón Editar HTML. Clica dentro de las líneas de código y saca el buscador clicando a la vez CTRL+F. Escribe <body>. Te llevará a una línea similar a la de la imagen.
 
Justo debajo pega el código que adjunto:

    <nav id='menu'>
    <input type='checkbox'/>
    <label>&#8801;<span>Menu</span></label>
    <ul>
        <li><a href='/'>Inicio</a></li>
        <li><a href='#'>Sobre mi</a></li>
        <li><a href='#'>Categorías<font size='1'>&#9660;</font></a>
            <ul class='menus'>
            <li><a href='#'>Categoría 1</a></li>
            <li><a href='#'>Categoría 2</a></li>
            <li><a href='#'>Categoría 3</a></li>
            </ul>
        </li>
        <li><a href='#'>Contacto</a></li>
    </ul>
        </nav>


Para personalizarlo es necesario una simples nociones de HTML. Las palabras escritas en gris debes cambiarlas por tus categorías. Para que los enlaces funcionen debes sustituir el símbolo # que les precede por la URL de la página de destino. La palabra menú saldrá al lado de las barritas en la versión móvil. Si deseas puedes cambiarlas por el nombre de tu blog (si no es muy largo). Observa como se construyen las subcategorías, anidando listas.  Si tienes dudas al respecto puedes consultar mi introducción al lenguaje HTML y al marcado de texto.

4. Añade los estilos CSS

La parte más importante de este menú. Busca en la plantilla HTML esta expresión <b:skin>...</b:skin>. Despliega el código clicando el triángulo en el margen.


Copia el código siguiente justo antes de ]]></b:skin>.


/*-----Menu responsive con subcategorias de MBT modificado por Minerva Aurora----*/
body {
margin: 0px;
padding-right: 0px;
padding-left: 0px;
}
#menu{
background: #F1F1F1;/* color de la barra*/
color: #333;/*color de las tres barritas*/
height: 40px;
border-bottom: 1px solid #E9E9E9;/* borde inferior de la barra*/
box-shadow: 1px 2px 9px #c6c6c6;/* sombra inferior de la barra*/
width:100%;
position:fixed; 
z-index:101; 
}
#menu ul,#menu li{
margin:0 auto;
padding:0 0;
list-style:none
}
#menu ul{
height:45px;
width:1000px; /* ancho del menú, ajustar para centrarlo*/
}
#menu li{
float:left;
display:inline;
position:relative;
font: 11px Arial, sans-serif;/*tamaño y fuente del texto */
}
#menu a{
display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: uppercase;
color: #333;/*color del texto*/
text-transform: uppercase;/*letras mayúsculas*/
letter-spacing: 1.5px;/*espacio entre letras*/
}
#menu li a:hover{
color: #000;/*color del texto al pasar el ratón*/
text-decoration: none;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #E9E9E9;/*color del fondo de la categoria al pasar el ratón*/
}
#menu input{
display:none;
margin:0 0;
padding:0 0;
width:80px;
height:30px;
opacity:0;
cursor:pointer
}
#menu label{
font: 25px  Arial, sans-serif ;
font-weight: bold;
display:none;
width:35px;
height:35px;
line-height:43px;
text-align:center;
}
#menu label span{
font: 12px  Arial, sans-serif;/*tamaño y fuente del texto "menu" */
position:absolute;
left:35px;
text-transform:uppercase;
font-weight: bold;
line-height: 40px;
letter-spacing:0.5px;
}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #F1F1F1;/*color del fondo del submenu*/
position: absolute;
z-index: 99;
display: none;
border: 1px solid #E9E9E9;
}
#menu ul.menus li{
display: block;
width: 100%;
font: 11px  Arial, sans-serif;/*tamaño y fuente del  texto del submenu*/
text-transform: uppercase;
border-bottom: 1px solid #E9E9E9;
}
#menu ul.menus li:last-child{
border-bottom:none;
}
#menu ul.menus a{
color: #333;/*color del  texto del submenu*/
line-height: 35px;
}
#menu li:hover ul.menus{
display:block
}
#menu ul.menus a:hover{
background: #E9E9E9;/*color del  fondo del submenu al pasar el ratón*/
color: #000;/*color del  texto del submenu al pasar el ratón*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 800px){
#menu{
position:fixed; 
z-index:101; 
}
#menu ul{
background:#F1F1F1;/*color del desplegable del menu movil*/
position:absolute;
top:100%;
right:0;
left:0;
z-index:3;
height:auto;
display:none
}
#menu ul.menus{
width:100%;
position:static;
padding-left:20px
}
#menu li{
display:block;
float:none;
width:auto;
font: 11px  Arial, sans-serif;
 }
#menu a{
 display: block;
 line-height: 40px;
 padding: 0 14px;/*tamaño y fuente del  menu movil*/
}
#menu input,#menu label{
position:absolute;
top:0;
left:0;
display:block
}
#menu input{
z-index:4
}
#menu input:checked + label{
color:#333;/*color de las tres barritas una vez se clica*/
}
#menu input:checked ~ ul{
display:block
}
}

Para ayudarte a personalizarlo he dejado algunas anotaciones al lado del código que implica cambio tipográfico o de color. Veras que es un texto encerrado así: /*comentario*/ , puedes borrarlos porque no afectan al código.

Si no tienes nociones básicas de CSS y deseas hacer un cambio de color rápido sustituye los siguientes códigos de color hexadecimales por los de tu blog:
#333 color gris oscuro del texto
#000 color negro del texto al pasar el ratón
#F1F1F1 color gris claro de la barra
#E9E9E9 color gris un poco más oscuro de fondo al pasar el ratón

Para centrar el menú en la vista de ordenador deberás modificar el ancho de la cuarta regla:
#menu ul{
height:45px;
width:1000px; /* ancho del menú, ajustar para centrarlo*/
}
Ve reduciendo el valor 1000 hasta que veas que el menú queda centrado.

Guarda los cambios hechos en tu plantilla y comprueba si funciona tu nuevo menú responsive.

Y eso es todo. De los menús que he probado este es el que más simple y efectivo me ha parecido. Si lo pruebas estaré encantada de leer tus opiniones abajo en los comentarios. Dudas, problemas o posibles errores, todo es bienvenido.

Actualización 

Para hacer que el menú no se solape y tape la cabecera de tu blog añade al final del código CSS anterior:

header{
padding-top:40px;
}

Aviso: si tu plantilla no es la plantilla simple de Blogger es posible que no funcione.

Si deseas que el menú tenga fijos los iconos de redes sociales sigue el siguiente tutorial: Menú responsive para Blogger con iconos sociales. He partido de éste menú, añadiendo y modificando algunos valores.




Entradas relacionadas

78 comentarios

  1. Muy bien explicado, se nota la pasión por lo que haces

    ResponderEliminar
    Respuestas
    1. Gracias! Intento hacerlo lo mejor posible, tal vez me ayude en ello el ser profesora ;)

      Eliminar
  2. Genial Minerva. Voy a probarlo en mi blog de pruebas. Si no te importa lo añadire tu link a mi curso de personaliza tu plantilla movil. Un beso.

    ResponderEliminar
    Respuestas
    1. Pues claro, será un honor para mi. Muchísimas gracias!!!

      Eliminar
  3. Genial Minerva. Voy a probarlo en mi blog de pruebas. Si no te importa lo añadire tu link a mi curso de personaliza tu plantilla movil. Un beso.

    ResponderEliminar
  4. Hola!
    Te he conocido a través de Ana de Frikymama, pues me gusta este menú y me gustaría ponerlo como lo tienes tú, con el menú responsive, las redes sociales y el buscador.
    ¿Todo lo encontramos en este tutorial?

    Por cierto, me hago seguidora, creo que me va a gustar estar por aquí, jeje.
    Te invito al mío, si te apetece. ;)

    Besos.

    ResponderEliminar
    Respuestas
    1. ¡Bienvenida! El menú que ves en mi blog es bastante más complejo, viene por defecto instalado en mi plantilla. Evidentemente que se le puede añadir todo eso pero no de una manera super sencilla. Aunque si tienes instaladas las fuentes awesome puedes añadir iconos dentro de una etiqueta li, pero aparecerá como el resto en el móvil. Encantada de conocer tu blog!

      Eliminar
    2. Hola Minerva, acabo de hacerlo y todo muy bien. Pero en la vista del pc también me ha cambiado, yo pensaba que sólo era para vista móvil!!! Diosss, con lo que me costó hacer esa barra fija en pc.
      No sé si hay alguna manera de volver al mi barra fija en el pc. Ya que en el móvil sí quiero este menú, pero en pC dejar la que tenía.
      Gracias!

      Eliminar
    3. Hola! Es un menú responsive, que quiere decir que se adapta a los diferentes dispositivos: tablets, móviles, ordenadores...Aunque si no has borrado el otro menú ni hay interferencias de CSS puedes mantener tu anterior menú. Para ocultar el mio debes añadir después de #menu{ display:none; y para volverlo a mostrar escribir después de @media screen and (max-width: 800px){
      #menu{display:block; Y eso es todo!

      Eliminar
    4. Gracias!! Intenté arreglarlo sólo con tu menú, y no quedó mal. Estoy conforme.

      Eliminar
  5. Está genial Minerva. Con tu permiso lo comparto. Ya va siendo hora que se noten también las posibilidades que tiene Blogger.
    Bss

    ResponderEliminar
    Respuestas
    1. Pues claro, muchas gracias por compartirlo. Y estoy de acuerdo que Blogger es una magnífica plataforma para un blog!
      Un beso!

      Eliminar
  6. Aplique tu barra y me tome la libertad de cambiarla un poquito. Una duda Minerva como hago para poner un buscador en esta misma barra (responsive) y manteniendo las redes sociales como se ve en mi blog demo:
    http://ddeemmo.blogspot.com/
    Muchas Gracias!!!

    ResponderEliminar
    Respuestas
    1. Hola, en el post aclaro de dónde saque el código, yo no soy programadora. Creo recordar que allí también ofrecian otro menu con buscador integrado, pero escogí éste por su sencillez al no necesitar más scripts que HTML y CSS.
      Saludos, me alegro que mi post te haya sido útil!

      Eliminar
  7. Es un post genial Minerva, estoy segura de que lo usarán muchas personas, yo la primera!! :) Gracias!

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

    ResponderEliminar
    Respuestas
    1. Hola! Por lo que veo es un menú que tiene sus propias clases y CSS, sintiéndolo mucho, no encuentro una solución rápida y fácil a tu problema.

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

      Eliminar
  9. Hola, felicitaciones por este post, me encantó y me resultó muy útil. Estaría genial que en al lado de contacto pudieramos agregar un buscador, será posible?

    Muchas gracias,

    Juan

    DecimoDoctor.com

    ResponderEliminar
  10. Wooo justo lo que buscaba, en la versión móvil queda de 10 este menú lo iré a probar y por cierto me suscribo ! Saludos

    ResponderEliminar
  11. Hola, me encanto la idea. Pero en el caso de que quiera ponerlo bajo la cabecera, ¿como podría hacerlo? Mi problema es en cuanto al CSS,porque el otro código lo supe ubicar perfecto. Me encanta tu blog <3

    ResponderEliminar
  12. Hola, ¿cómo puedo hacer que el menú quede a la derecha?

    ResponderEliminar
    Respuestas
    1. Hola!No acabo de entender bien, deseas que el menú quede a la derecha y los iconos a la izquierda?

      Eliminar
  13. Hola Minerva,

    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: www.laaventuradeldragon.blogspot.com

    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, te puedo enviar la vista previa de cómo quedaba (mal), al implementar tu código.

    Gracias. Un saludo

    ResponderEliminar
    Respuestas
    1. Hola Jonathan siento decirte que este código construye solo un menú fijo arriba en la pantalla en forma de barra tal y como puedes observar en la demo. Por otra parte piensa que no es aconsejable en el diseño para pantallas táctiles menús con tantos niveles porque son dificiles de accionar sin el ratón.
      Un saludo!

      Eliminar
  14. Encontre miles de tutoriales que no funcionaban pero este realmente es el unico que funciono! te agradezco muchisimo

    ResponderEliminar
  15. TE AGRADEZCO MUCHO !que hayas hecho este post! para las que empiezan como yo es muy sencillo de aplicar y poder tener un bonito menu.
    La mejor explicacion que me he encontrado
    gracias!

    ResponderEliminar
  16. Gracias Minerva, pero yo no tengo la plantilla simple si no la plantilla Fantástico S.A.. Pero de todas formas no me gustaría nada renunciar a un menú como el que tiene arriba je je, si no es mucho pedir, claro.

    Solo que encima mi blog abarca tantos temas que necesitaría varias líneas y hacerlo bien grande para que el usario no se lie o tal vez también que las casillas no tuvieran un tamaño determinado, si no el que marcara la letra para que así al no quedar las casillas igualitas una debajo de otra no se liara el lector al pulsarlas. Y si de paso se puede poner los elementos en el color que quiera pues lo borda.

    Bueno... usted hará lo que pueda y quiera. Claro está.

    Ahhh y me gustaría quitar el pie de página donde pone "Entrada principal" y sustituirlo por un buscador con otro menú horizontal.

    También me gustaría tener siempre dentro de una plantilla de entradas mis propios encabezados, sus iconos a las redes sociales (saber ponerlos arriba, abajo y en donde yo quiera, a ser posible con mis propios dibujos). Así te regalo mis imágenes (con una pequeña marca muy discreta).

    Por cierto tengo imágenes libres de derecho para regalar si las quieres. De momento son poquitas las que coinciden con tu temática pero supongo que a medida que vaya avanzando haré muchas mas.

    ResponderEliminar
  17. Perdona no puse eso de que me avisaran. Estoy un poco liada...

    ResponderEliminar
    Respuestas
    1. Hola María José- La plantilla que mencionas es una de las predeterminadas de Blogger, el tutorial debería funcionar igual de bien. Si deseas iconos sociales consulta mi otro post en el que amplio este menú añadiendo iconos. Por otr parte si deseas ayuda con el diseño de tu blog puedes contactar conmigo a otras diseñadoras que trabajen con Blogger. Un saludo!

      Eliminar
  18. Hola, como le agrego un buscador a esta barra?

    ResponderEliminar
  19. Excelente!!! funciona de maravilla!!

    ResponderEliminar
  20. Hola, Minerva:

    Estoy intentado hacer un menú responsive pero no me sale :-( Me queda perfecta la barra de menú para el ordenador, pero en el móvil no me sale el desplegable, solamente la página de inicio (las entradas del blog).

    Te dejo la dirección por si pudieras indicarme algo: https://rosamunozbermudez.blogspot.com.es/

    La verdad es que tengo un blog que me gusta mucho pero lo hice con Dynamic Views y no hay forma de que se adapte al móvil ni le puedo hacer menú desplegable (https://rosambermudez.blogspot.com.es). Es por ello que me gustaría migrarlo todo a una plantilla sencilla.

    ¡Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Rosa, lamento decirte que no puedo ayudarte. El código que estás usando no es el de este tutorial. No es un menú responsive y por eso no aparece en móvil. Un saludo

      Eliminar
    2. Perdona, Minerva. Me he liado con otro código que tenía. Ahora estoy aplicándome con este. Luego te digo qué tal va. ¡Mil gracias!

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

    ResponderEliminar
  22. Hola

    He colocado el código en mi blog, pero en la versión móvil, la palabra "Menú", me sale en vertical en vez de horizontal. ¿Alguna solución?

    Gracias!

    ResponderEliminar
    Respuestas
    1. Este menú es una adaptación de estilo del que cito en el artículo. Si deseas resolver ese problema puedes instalar la última revisión que hice donde añadí además un buscador. Al usar fontawesome para mostrar las tres rallitas ese efecto desaparece.

      Eliminar
    2. Solucionado. Muchas gracias por tu rápida respuesta.

      Un saludo

      Eliminar
  23. Hola, Minerva. En verdad es excelente este post, con unas ligeras modificaciones pudimos montar el menú en nuestro blog... muchas, ¡muchas gracias!

    ResponderEliminar
  24. Hola, muchas gracias por las explicaciones, he conseguido poner el MENÚ pero quisiera ponerlo después de la cabecera tanto en versión escritorio como en el móvil. ¿Hay alguna forma de hacerlo?
    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Se podría pero este código no te sirve para ese fin. Lamento no poder ayudarte.

      Eliminar
  25. MUCHAS GRACIAS!!!
    Me ha sido muy útil.

    ResponderEliminar
  26. Me ha gustado mucho tu blog, voy a echar un vistazo para ver si puedo perosonalizar el mío asi. Buen trabajo.

    ResponderEliminar
    Respuestas
    1. Gracias! Yo ya lo veo un poco desfasado e impersonal. Estoy trabajando en una nueva plantilla para él que espero poder lanzar pronto. Un saludo

      Eliminar
  27. Hola buenas tardes, a la hora de de crear el menu desplegable quiero que cada submenu vaya escrito en una sola linea, puesto que cuando es un texto largo lo que yo he puesto, Me lo pone en varias lineas.
    ¿hay posibiladad?

    Muchisimas racias y un saludo, funciona GENIAL!!!

    ResponderEliminar
    Respuestas
    1. Hola. Prueba a variar el ancho del siguiente código : #menu ul.menus { width: 170px;} en vez de 170px pon 300px o lo que necesites. De todas maneras evita crear títulos muy largos para las pestañas. Un saludo

      Eliminar
    2. joo que bien muchisimas gracias, SOLUCIONADO, y ahora he puesto una foto para que vaya en lugar de la cabecera de blogger pero en la versión movil no me la ajusta, que puedo hacer??

      Eliminar
  28. Sin más datos no puedo ayudarte. Depende de cómo este codificada la plantilla la imagen se adaptará o no en móviles. Deja un enlace a tu blog y me lo miro.

    ResponderEliminar
  29. hola minerva, la verdad es ta muy buena tu explicación . felicidades y sigue así . saludos

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

    ResponderEliminar
  31. hola minerva
    muchas gracias por la explicacion, me funciona barbaro!!!

    tengo una pregunta, seguro me podes ayudar, necesito que el menu, tanto en el pc como en el movil sea de derecha a izquierda (en vez de izquierda a derecha). me explico: que "inicio" aparezca a la derecha, "sobre mi" a su izquierda, "categorias" a izquierda del anterior, etc.
    trate de ubicar "text-align: right;" en varios lados, pero solo logre que en el pc funcionen los sub menus (se ven a la derecha), pero en el celular desaparecen (se descentran), y no logre cambiar toda la direccion de menu.

    espero que puedas ayudarme
    https://i-did-it-diy.blogspot.com/

    gracias!!!

    ResponderEliminar
  32. En primer lugar, gracias por el Tuturial. Intenté implementarlo en nuestra página www.bloghemia.com , pero el menú tapa la cabecera de la página. Seguí tu consejo, y agregué el código que colocaste, y sigue igual.Bien, en eso me dije: ¿Y si quito la cabecera y me quedó solo con el menú? Y no me parece mala la idea. Será posible agregar a la barra, el nombre blog? Y asi usarlo como cabecera. Un abrazo. Estaré pendiente de tu respuesta, Saludos.

    ResponderEliminar
    Respuestas
    1. Hola, siento que no puedo ayudarte mucho, creo que resolviste el tema ya con otro menú o plantilla. Las dos opciones que comentas son posibles, con código todo es posible. Gracias por probar mi menú.

      Eliminar
  33. Saludos, gracias por tu aporte, use tu menú pero en la versión móvil la palabra MENU se ve vertical, algún consejo para solucionarlo. gracias

    ResponderEliminar
    Respuestas
    1. Hola, prueba a instalar la última versión de este menú que usa un icono de rallas en vez de la palabra menú. https://minervaurora.blogspot.com/2017/10/menu-responsive-desplegable-iconos-sociales-buscador.html

      Eliminar
  34. ¡Hola! He seguido todas las instrucciones y funciona todo correctamente. Muchas gracias :)

    ResponderEliminar
  35. Hola, chulada de código. Tenía tiempo buscando algo así. Gracias.
    Ahora, una petición, ¿podrías decirme dónde tengo que modificar el código para que el cuadro de las pestañas desplegable se haga más ancho?

    ResponderEliminar
  36. Hola, qué gran ayuda. Ya instale el código en mi web. Pero quisiera que me ayudaras, si pudieras. Mira desde la pestaña que tiene un submenú, me gustaría instalar otro submenú que cuelgue desde el primer submenú. Algo así como lo siguiente:
    class='top'> ='top_link' href='#'>Pestaña 4
    class='sub'>
    href='URL del enlace'>Pestaña 4.1
    class='fly' href='#'>Pestaña 4.2

    href='URL del enlace'>Pestaña 4.2.1
    href='URL del enlace'>Pestaña 4.2.2
    href='URL del enlace'>Pestaña 4.2.3
    href='URL del enlace'>Pestaña 4.2.4
    href='URL del enlace'>Pestaña 4.2.5
    href='URL del enlace'>Pestaña 4.2.6


    Gracias.

    ResponderEliminar
    Respuestas
    1. No te recomiendo submenús de submenús. En dispositivos móviles son difíciles de accionar.

      Eliminar
  37. Hola,sabes por que las entrads no se ve ven,hice el tutorial correcto y funciono,pero las entradas no se ve. Si me puedes ayudar

    ResponderEliminar
    Respuestas
    1. Sin tener el link a tu blog para inspeccionarlo no te puedo ayudar.

      Eliminar
  38. HOLA BENDICIONES COMO HAGO PARA LAS TRES BARRITA DE QUE SE VEA MAS GRANDE

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

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

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

    ResponderEliminar
  42. Hola Minerva, acabo de hacer el menú pero no sale la palabra Menú ni las tres rayitas. Solo sale un cuadradito sin texto ni nada.


    Espero me puedas ayudar. El blog es https://recordandoati.blogspot.com/

    ResponderEliminar
  43. very nice article and for latest news visit in desi news Desi News

    ResponderEliminar
  44. buenos días, intento poner en mi blog un vídeo, pero cuando le doy a nueva entrada en la barra sólo me aparece la opción de enlace o de foto y no se como añadir a esa barra otras opciones. https://coaching-mastery.com/juegos-2d-para-pc/

    ResponderEliminar
  45. Hola me encanta este menú y lo tengo en mi blog, pero me gustaría saber cómo a los sub menús añadirles otros submenús.
    Me podrías ayudar?

    ResponderEliminar
  46. Hola Minerva Aurora, muchas gracias por compartirnos todo este conocimiento, yo no sabía nada de HTML, y ahora sigo sin saber mucho, pero al menos he puesto mi blog bien más bonito y optimizado que antes

    ResponderEliminar
  47. Buenas estoy usando tu tutorial para crear mi menú sin embargo cuando hay dos sub menus no funciona ¿Cómo lo hago?

    ResponderEliminar
  48. y además no me funciona en el móvil. tengo la plantilla ethernal puesta

    ResponderEliminar
  49. buenan noches tengo un blog de informacion deportiva que me gustaría que tanto en movil como en ordenador estuviese odernado de la siguiente manera https://helloiampaula.blogspot.com/ pero cuando lo intento hacer en el real y con tus códigos no me sale bien y además tampoco se me muestra en el movil. he seguido todos los pasos. además no sé porque no se muestra en el movil

    ResponderEliminar