Menú responsive: desplegable con iconos sociales y buscador

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.