Menú responsive: desplegable con iconos sociales y buscador

domingo, octubre 08, 2017



En el proceso de diseño de un blog un aspecto que cuido mucho es la navegación. Uno de los menús que más éxito tiene entre mi clientela es el que aprenderás a instalar en este tutorial. El menú admite desplegables (para subcategorías) y se completa con iconos sociales, y buscador, algo muy útil para nuestros lectores. Además se mantiene fijo al desplazar la página y funciona correctamente en móviles mostrando las típicas tres rayitas que al clicar despliegan el menú.

Si me sigues de hace tiempo advertirás que se trata de una actualización del menú que ya adapté en un primer momento añadiendo los iconos sociales. Muchos de mis lectores me pidieron entonces completarlo con un buscador, cosa que en aquel momento no me hacía mucha gracia. Mi intención había sido dar una solución sencilla y ligera al problema que generaba las barras fijas en la plantilla simple de Blogger, esas que puso de moda Miss Lavanda y otras blogueras. Barras que tenían un ancho fijo y no colapsaban en las vistas móviles.

Poner un buscador como el de las plantillas premium exige el uso de jQuery, una biblioteca de JavaScript, que sería una pequeña carga extra para el blog... y acabé dejando correr el tema. Pasado el tiempo dejé prácticamente de publicar, aunque nunca abandoné el blog. He continuado respondiendo a casi todos los comentarios que me llegaban y dando soporte a muchos de los que me habéis escrito personalmente. He participado en preciosos proyectos de diseño que poco a poco iré subiendo al portfolio y a mis redes (recién activo también Instagram)

Una vez acabados los proyectos de rediseño y puesta a punto para el nuevo curso tocaba retomar con ilusión el blog. Mi idea era publicar un post, durante mucho tiempo pospuesto, en el que declaro los típicos errores en diseño que solemos cometer al intentar personalizar el blog,  Pero por casualidades de la vida vengo a publicar este otro. Confieso que este tutorial nace un poco de mi orgullo, y otro tanto de constatar que aún hay necesidad de mejora en Blogger.

Parece que las plantillas responsive nativas de Blogger no son del agrado de todos y cuesta abandonar la tan personalizable plantilla simple. Sin duda este menú está pensado también para ella, si lo probáis en cualquier otra plantilla no es seguro que funcione, de hecho lo más probable es que se convierta en un fiasco y una pérdida de tiempo.

En este renovado menú también he añadido algunas líneas de código en las que solicito la atribución, y aquí viene explicaros la parte de orgullo. El anterior tutorial fue copiado (sin atribución) en diferentes blogs y recientemente ha servido para promocionar un curso de diseño para bloguer@s. Estas cosas me molestan bastante porque yo adapté el menú y cree el tutorial para compartirlo gratuitamente en este blog. Pero lo peor, y lo que más me molesta, es que se altere de manera chapucera añadiendo elementos de otros tutoriales sin unos mínimos conocimientos en programación, dándole un carácter poco profesional.

Todas estas cosas son finalmente las que me han impulsado a retomar de nuevo la cuestión del menú, y espero que ahora sí sea de tu agrado. ¿Que quieres probar que pinta tiene y cómo funciona antes de instalarlo? Claro que sí, pincha en los siguientes enlaces. Recuerda que si estás en el ordenador para simular la vista móvil debes reducir el ancho de la ventana del navegador.

Ver demo del menú responsive

Ver demo del menú simulando la vista móvil

Además del buscador observarás que he modificado un poco el estilo, ahora es algo más minimalista, y funcional. Ya no aparece la palabra menú que causaba problemas cuando no actuaba la vista móvil de Blogger. He ahorrado también espacio al juntar un poco más los iconos sociales. Para facilitar la tarea de personalización las posibilidades de cambio de color se reducen a barra y  texto/iconos. Las tres barras y el indicador de desplegar son más elegantes y se apreciaran igual en los diferentes dispositivos (ahora son iconos fontawesome).

¿Te convence? Pues sigue aquí los pasos para instalarlo.

Instalación paso a paso

Antes de comenzar a trabajar con tu plantilla haz copia de seguridad y habilita la vista móvil de Blogger personalizada   (la que viene por defecto impide que se cargue este menú). Puedes seguir los dos  primeros pasos de este tutorial .  Prepara también el listado de URLs a los que quieres que enlace el menú y los iconos sociales.

1. Instala Font Awesome, la fuente de  iconos web

En el panel de administración de Blogger selecciona la opción plantilla y clica  en el botón Editar HTML. Mediante el buscador (clica a la vez CTRL + F) busca la etiqueta </head>. Justo antes de esta línea de código pega lo siguiente:

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Crea el HTML de tu menú

Este menú está pensado para que permanezca fijo en la zona superior de la pantalla por lo que deberás copiar el siguiente código después de la etiqueta <body> de tu blog, si tienes instalada la plantilla simple de Blogger te aparecerá algo más larga, tal que así  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>.

Personaliza el siguiente código y añádelo justo debajo del body.

<nav id='menu'>
    <div class='barra'>
        <input type='checkbox'/>
        <label><i aria-hidden='true' class='fa fa-bars'/></label>
        <ul class='principal'>
            <li><a href='/'>Inicio</a></li>
            <li><a href='#'>Sobre mí</a></li>
            <li><a href='#'>Categorías <i class="fa fa-chevron-down"></i></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>
        <div class='iconos'>
            <a href='#'><i aria-hidden='true' class='fa fa-twitter'/></a>
            <a href='#'><i aria-hidden='true' class='fa fa-facebook'/></a>
            <a href='#'><i aria-hidden='true' class='fa fa-instagram'/></a>
            <a href='#'><i aria-hidden='true' class='fa fa-pinterest-p'/></a>
        </div>
        <div id='buscador'>
            <a href='#'><i class='fa fa-search'/></a>
        </div>
        <div class='busqueda'>
            <form action='/search' id='searchform' method='get' role='search'>
                <div><input id='s' name='q' placeholder='Escribe y pulsa enter...' type='text'/></div> 
            </form>    
        </div>
     </div>
</nav>

Si deseas añadir más categorías deberás abrir nuevas etiquetas <li>. Si tienes dudas de cómo hacerlo consulta el punto en el que hablo de listas en mi entrada  marcado de texto en HTML.

Los iconos sociales se añaden mediante etiquetas <i> con la clase que nos da la página oficial de la fuente Awesome. Cada red social se representa en una línea, por ejemplo:

<a href='#'><i aria-hidden='true' class='fa fa-twitter'/></a>

El signo de parrilla debes sustituirlo por la URL donde quieres que enlace cada categoría o icono.

3. Añade el código CSS

Ahora desplázate en tu plantilla hasta este código ]]></b:skin> . Justo antes pega las siguientes líneas:

/*-----------------------------------------------
Menu responsive de MBT modificado por Minerva Aurora
Tutorial disponible en http://minervaurora.blogspot.com/2017/10/menu-responsive-desplegable-iconos-sociales-buscador.html
Libre para uso personal manteniendo la atribución intacta
----------------------------------------------- */
body {
margin: 0px;
padding-right: 0px;
padding-left: 0px;
}
.barra{
width:1020px;/*ancho del blog*/
margin:0 auto;
position: relative;
}
#menu{
background: #F1F1F1;/* color de la barra*/
color: #333;/*color de las tres barritas*/
height: 50px;
border-bottom: 1px solid rgba(0,0,0,.05);
width:100%;
position:fixed; 
z-index:101; 
}
#menu ul,#menu li{
margin: 0px auto;
padding:0 0;
list-style:none;
}
#menu .iconos{
float:right;
margin-right: 50px;
}
#menu li{
float:left;
display:inline;
position:relative;
font: 11px Arial, sans-serif;/*tamaño y fuente del texto */
}
#menu ul a{
display: block;
line-height: 50px;
padding: 0 14px;
text-decoration: uppercase;
color: #333;/*color del texto*/
text-transform: uppercase;
letter-spacing: 1.5px;/*espacio entre letras*/
}
#menu li a:hover{
color: #999;/* 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;
}
#menu input{
display:none;
margin:0 0;
padding:0 0;
width:50px;
height:50px;
opacity:0;
cursor:pointer
}
#menu label{
display:none;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 17px;
vertical-align: middle;
}
#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 rgba(0,0,0,.05);
}
#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{
color: #999;/*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;
}
.iconos a{
padding: 0 10px;
height: 50px;
display: inline-block;
}
#menu .iconos .fa{
font-size:14px;
line-height: 50px;
color: #333;/*color del icono social*/
-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;
}
#menu ul .fa{
font-size: 8px;
position: relative;
top: -1px;
}
#menu .iconos .fa:hover{
color: #999;/*color del icono social al pasar el ratón*/
}
#menu .iconos::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #000;
    margin-left: 5px;
    opacity: .1;
}
#buscador {
position:absolute;
right:0;
top:0px;
width:50px;
text-align:center;
}
#buscador a {
height: 50px;
font-size: 14px;
line-height: 50px;
color: #333;
display: block;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 50px;
}
#buscador a:hover {
color:#999;
}
.busqueda{
position:absolute;
top:50px;
right:0px;
display:none;
z-index:10000;
}
.busqueda #searchform input#s {
border: 1px solid #e5e5e5;
width:190px;
background:#FFF;
padding: 7px 10px;
font-size: 12px;
color: #999;
letter-spacing: 1px;
display:block;
opacity:1;
}
.busqueda #searchform input#s:focus {
border:1px solid #d5d5d5;
}
@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 ul a{
 display: block;
 line-height: 40px;
 padding: 0 14px;
}
#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;
top: 50px;
}
.barra{
width:95%!important;
}
.busqueda{
right:212px!important;
}
}
header{
padding-top:50px;
}
/*-----fin menu responsive-----*/

Lo primero que deberás personalizar es el ancho del menú. En la siguiente línea cambia 1020px por el ancho de tu blog.

.barra{
width:1020px;/*ancho del blog*/
margin:0 auto;
}

El resto de elementos susceptibles de ser personalizados los encuentras comentados en el código de esta manera /*--- comentario ---*/

La última regla empuja la cabecera hacia abajo para que no quede tapada por el menú. Está programada sólo para la plantilla simple de Blogger, si usas otra plantilla posiblemente no funcionará bien.
header{
padding-top:50px;
}

4. Añade el script de funcionamiento del buscador

Busca la etiqueta </html>, y justo antes de ella copia el siguiente código:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script> $(document).ready(function(){ $('#buscador a').on('click', function(e) { e.preventDefault(); $('.busqueda').slideToggle('fast'); }); }); </script>

La primera línea de código carga la biblioteca jQuery necesaria para que se entienda la siguiente línea, y aparezca la cajetilla de búsqueda. Si ya la tienes enlazada en tu blog porque la añadistes en otro tutorial óbviala, no dupliques la llamada. El script es tan sumamente sencillo que te servirá cualquier versión de jQuery, aunque sea más antiguo.


Guarda los cambios hechos y comprueba si funciona en tu blog el nuevo menú responsive.
Si algo se resiste revierte los cambios en la plantilla (CTRL + Z) y vuelve a intentarlo, a veces una simple llave mal cerrada puede causar estragos. Si aún sigue sin funcionar eres libre de comentar aquí abajo tu incidencia.

Entradas relacionadas

20 comentarios

  1. Hola
    Bienvenida!!! Tomo nota para el nuevo blog. Un beso.

    ResponderEliminar
    Respuestas
    1. Claro que sí! Deseando verlo. Un gran abarazo virtual.

      Eliminar
  2. Muchísimas gracias, llevaba semanas buscando algo similar y no daba con ello al fin voy a poner mi blog como quiero. Gracias de corazón.

    ResponderEliminar
  3. Hola!! Me encanta que haya artículos como el tuyo por la red, nos ayudáis mucho a la que estamos perdidas con estos temas. Una de las razones por las que deje Blogger fue que no encontraba una plantilla que se adaptara a lo que buscaba. Seguramente si hubiera conocido tu blog entonces no habría cambiado. Es un paso laborioso el que enseñas pero sí da sus frutos bienvenido sea. Besos

    ResponderEliminar
    Respuestas
    1. Realmente es una pena que muchas os paseís a Wordpress por pequeños detalles como éstos. Todo es cuestión de encontrar plantillas con estas funcionalidades. En Blogger hay menos oferta pero te puedo asegurar que para las necesidades de un blog encuentras plantillas la mar de apañadas.

      Eliminar
  4. Bufff, me cuesta un poco seguirte, muy técnico para mí. Necesitará una segunda lectura. Pero viene fenomenal ya que gran parte de mi tráfico viene por móvil. Gracias

    ResponderEliminar
    Respuestas
    1. Jaja sí la lectura es un poco árdua si no se está familiarizado con estos tipos de tutoriales, pero pasito a pasito y consultando el resto de post que enlazo se puede seguir. Un saludo.

      Eliminar
  5. Muy buena entrada, felicidades, me gusta mucho que al final hayas denegado la propuesta de jquery porque a parte de añadirle más carga a blogger no funciona muy bien con todas las plantillas y hay gente a la que le "estropea más que ayuda".
    Es muy importante tener un buen menú responsive en el blog porque las búsqueda móviles cada vez son mayores y con detalles así de sencillos hacemos que nuestros blogs sean mucho mejores.
    Un saludo

    ResponderEliminar
    Respuestas
    1. Bueno...la intención era prescindir de esa carga, pero al final la añadí para el buscador. Le daré una vuelta a los códigos a ver si puedo evitarla. Gracias por comentar.

      Eliminar
  6. Hola! una entrada genial y súper completa!! me ha encantado!!
    Necesito un menú responsive en mi blog, la verdad es que estoy pensando en darle un cambio al look de mi blog, la cabecera, la plantilla, un poco todo, de vez en cuando me gusta cambiarlo y ahora ya llevo una temporada bastante larga sin hacerle ningún cambio. Tomo nota de todos los consejos!!
    Gracias por el post!
    Besos

    ResponderEliminar
    Respuestas
    1. ¡Genial! No te pierdas mi siguiente post porque daré unas claves bastante útiles para acometer la personalización del blog

      Eliminar
  7. Me ha encantado esta entrada, es muy práctica y útil. Yo hace tiempo que estoy pensando en cambiar el aspecto y el diseño de un blog que tengo, pero nunca me acababa de decidir por una plantilla, o sea que tomo nota de todos tus consejos y voy a ver si consigo cambiarlo.
    Gracias por compartir.

    ResponderEliminar
    Respuestas
    1. Esto de elegir plantillas es todo un arte. Tengo pensado un post para dar unas pautas útiles. Pero de momento yo te diría que escogieras dentro de las más nuevas y revisar siempre cómo trabajan en responsive. Un saludo

      Eliminar
  8. Muy bien explicada la entrada. Yo ando todavía un poco perdida en cuanto a los temas para el blog, cómo personalizarlos y añadir o quitar cosas. La verdd que se agradecen artículos como el tuyo y que podamos entender.
    El diseño queda muy limpio y profesional, me gusta muchísimo.

    ResponderEliminar
    Respuestas
    1. La verdad que personalizar el blog es algo muy necesario pero tampoco hace falta obsesionarse con cambiarlo todo. Es más práctico escoger una buena plantilla y modificar aquello que nos permita de manera fácil. Muchas gracias por pasarte por aquí.

      Eliminar
  9. Hola Minerva!!
    Hace tiempo quise cambiar el diseño de mi blog con menú responsive desplegable, con iconos de las diferentes redes sociales y buscador. Elegí una plantilla, se la enseñé a mi hermano informático y le expliqué los cambios que quería, en definitiva, es él el que se encarga de todo este tema que para mí es muy complicado pero es muy importante para que nuestros blogs tengan una buena imagen, sean atractivos,... para nuestros seguidores.
    Hay que tener en cuenta que la mayor parte de nuestros seguidores (al menos los míos sí) ven nuestros post a través el móvil, así que hay que tenerlo en cuenta a la hora del diseño del blog, del menú,...
    Un post muy interesante. Un beso guapa!!

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa! Muy bien que hiciste eligiendo una plantilla responsive, además es la misma que tenía mi blog hace un año, pero cuidado acuérdate de desactivar la vista móvil de Blogger. No sé si lo has dejado a propósito...estoy viendo un problemilla que tienes en el menú de la plantilla, probablemente se tocó código allí. Contacta conmigo y lo miramos. Un saludo.

      Eliminar
  10. Anda que interesante,no tenia ni ideaaa, veré la demo y probaré s instalarlo.

    El rincón de Pau Blog 💗

    ResponderEliminar
  11. Desde ya te digo que me he guardado este post en favoritos. Pero me da mucho miedo tocar el html, así que igual me abro un blog de pruebas, que para cerrarlo a tiempo estoy, como toque algo que no debo...Lo del menú desplegable es algo que estaba pensando, pero cuando tenga tiempo para hacerlo con calma.
    Por otro lado, me surge la duda de tener las redes por duplicado, arriba y los iconos que tenemos casi todas, ¿no es contraproducente?
    Muchas gracias por el post, espero ponerme manos a la obra y mejorar un poco mas mi rincón...Bss.

    ResponderEliminar