Crea un menú desplegable responsive para Blogger

viernes, marzo 11, 2016



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

30 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. hola me podrias ayudar, yo tengo ya un menu creado pero no de la forma como lo tienes tu podras ayudarme a modificarlo para versión movil te dejo el link de mi blog: http://www.undolarxinternet.com gracias

    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. entonces podrías ayudarme a poner tu menú debajo de la imagen justo donde yo tengo mi menú lo quiero remplazar, no se que mover en el codido que pones para que se quede estático (en tu caso en la parte superior, en el mio quiero que remplace el mio con las mismas características del tuyo creo que eso si puede ser posible verdad?, gracias por atender mi pregunta, saludos.

      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