Bonito menú responsive desplegable para Blogger

Buscas un menú responsive para tu blog? Continúa leyendo este tutorial ya que te mostraré como poner un menú responsive para tu blog. Recuerda que la palabra responsive quiere decir que se ajustará automáticamente al tamaño del dispositivo donde se visualice el menú, en este caso será del menú responsive. En lo personal este menú me ha gustado mucho, tanto que lo implemente en mi blog y lo puedes ver en funcionamiento desde aquí.

Para poder colocar este menú responsive para tu blog, necesitaremos el uso de los Script para poder lograr el efecto responsive. Te aseguro que después de estos cambios tu blog se verá mucho más atractivo con este menú responsive.


Implementación del menú responsive para tu blog.
Como primer paso tendremos que seguir la siguiente ruta: Plantilla Editar HTML, estado ahí presionamos Ctrl + F y buscamos el siguiente código <head>. Ahora copiamos y pegamos justo debajo del código que encontramos lo siguiente.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
En caso de contar con las dos primeras líneas, solo pegar la tercera línea de código.

Ya hecho lo anterior, ahora buscamos el siguiente código </b:skin> y pegamos los siguientes estilos justo debajo del código que encontremos.
<style>
nav {
  display: block;
  background: #E95546;
}

.menu { display: block; }

.menu li {
  display: inline-block;
  position: relative;
  z-index: 100;
}

.menu li:first-child { margin-left: 0; }

.menu li a {
  font-weight: 600;
  text-decoration: none;
  padding: 20px 15px;
  display: block;
  color: #fff;
  transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,
.menu li:hover&gt;a {
  color: #fff;
  background: #FC6D58;
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: 170px;
  position: absolute;
  left: 0px;
  background: #fff;
  z-index: 99;
  transform: translate(0, 20px);
  transition: all 0.2s ease-out;
}

.menu ul:after {
  bottom: 100%;
  left: 20%;
  border: solid transparent;
  content: &quot; &quot;;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 6px;
  margin-left: -6px;
}

.menu ul li {
  display: block;
  float: none;
  background: none;
  margin: 0;
  padding: 0;
}

.menu ul li a {
  font-size: 12px;
  font-weight: normal;
  display: block;
  color: #797979;
  background: #fff;
}

.menu ul li a:hover,
.menu ul li:hover&gt;a {
  background: #FC6D58;
  color: #fff;
}

.menu li:hover&gt;ul {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

.menu ul ul {
  left: 169px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
  transform: translate(20px, 20px);
  transition: all 0.2s ease-out;
}

.menu ul ul:after {
  left: -6px;
  top: 10%;
  border: solid transparent;
  content: &quot; &quot;;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 6px;
  margin-top: -6px;
}

.menu li&gt;ul ul:hover {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

.responsive-menu {
  display: none;
  width: 100%;
  padding: 20px 15px;
  background: #E95546;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
}

.responsive-menu:hover {
  background: #E95546;
  color: #fff;
  text-decoration: none;
}

a.homer { background: #FC6D58; }
@media (min-width: 768px) and (max-width: 979px) {
.mainWrap { width: 768px; }
.menu ul { top: 37px; }
.menu li a { font-size: 12px; }
a.homer { background: #E95546; }
}

@media (max-width: 767px) {
.mainWrap {
  width: auto;
  padding: 50px 20px;
}

.menu { display: none; }
.responsive-menu { display: block; }

nav {
  margin: 0;
  background: none;
}

.menu li {
  display: block;
  margin: 0;
}

.menu li a {
  background: #fff;
  color: #797979;
}

.menu li a:hover,
.menu li:hover&gt;a {
  background: #FC6D58;
  color: #fff;
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  transform: initial;
}

.menu li:hover&gt;ul {
  visibility: visible;
  opacity: 1;
  position: relative;
  transform: initial;
}

.menu ul ul {
  left: 0;
  transform: initial;
}

.menu li&gt;ul ul:hover { transform: initial; }

}
</style>
De igual manera busca este código </head> y colocamos el siguiente Script justo arriba del código que encontramos.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
En caso de contar con un Script jquery.min.js en tu blog omite este paso ya que no será necesario insertar la anterior línea de código.

Busca el siguiente código <body> y paga todo esto justo debajo del código que encontremos.
<nav>
   <a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-reorder'/> Menu</a>
   <ul class='menu'>
     <li><a class='homer' href='/'><i class='fa fa-home'/> Inicio</a></li>
     <li><a href='#'><i class='fa fa-tags'/> Noticias</a>
         <ul class='sub-menu'>
            <li><a href='#'>Sub-Menu 1</a></li>
            <li><a href='#'>Sub-Menu 2</a></li>
            <li><a href='#'>Sub-Menu 3</a></li>
            <li><a href='#'>Sub-Menu 4</a></li>
            <li><a href='#'>Sub-Menu 5</a></li>
         </ul>
     </li>
     <li><a href='#'><i class='fa fa-tags'/> Entretenimiento</a>
         <ul class='sub-menu'>
            <li><a href='#'>Sub-Menu 1</a></li>
            <li><a href='#'>Sub-Menu 2</a></li>
            <li><a href='#'>Sub-Menu 3</a></li>
            <li><a href='#'>Sub-Menu 4</a></li>
            <li><a href='#'>Sub-Menu 5</a></li>
         </ul>
     </li>
     <li><a href='#'><i class='fa fa-tags'/> Videos</a>
         <ul class='sub-menu'>
            <li><a href='#'>Sub-Menu 1</a></li>
            <li><a href='#'>Sub-Menu 2</a></li>
            <li><a href='#'>Sub-Menu 3</a></li>
            <li><a href='#'>Sub-Menu 4</a></li>
            <li><a href='#'>Sub-Menu 5</a></li>
         </ul>
     </li>
     <li><a href='#'><i class='fa fa-envelope'/> Contactos</a></li>
  </ul>
</nav>
Cambia todos los nombres que están marcados de color rojo por las secciones que tengas o desees. Elimina todos los símbolos # que están marcados de color azul y reemplaza cada uno de ellos por las direcciones url´s de los post o etiquetas a donde quieres que los lleve cuando den clic sobre él.
Si deseas aumentar otras categorías, sigue el patrón o copiar el siguiente código justo arriba del código verde </ul>.
<li><a href='#'><i class='fa fa-tags'/> Tecnología</a>
         <ul class='sub-menu'>
            <li><a href='#'>Sub-Menu 1</a></li>
            <li><a href='#'>Sub-Menu 2</a></li>
            <li><a href='#'>Sub-Menu 3</a></li>
            <li><a href='#'>Sub-Menu 4</a></li>
            <li><a href='#'>Sub-Menu 5</a></li>
         </ul>
</li>
Por último busca </body> y pega las siguientes líneas de código justo arriba del código que encontremos.
<script>
$(document).ready(function(){
  var touch   = $(&#39;#resp-menu&#39;);
  var menu  = $(&#39;.menu&#39;);

  $(touch).on(&#39;click&#39;, function(e) {
    e.preventDefault();
    menu.slideToggle();
  });
  $(window).resize(function(){
    var w = $(window).width();

    // breakpoint
    if(w &gt; 767 &amp;&amp; menu.is(&#39;:hidden&#39;)) {
      menu.removeAttr(&#39;style&#39;);
    }
  });
});
</script>
Ahora guardamos los cambios hechos en nuestra platilla, visualice su blog para ver el menú en acción. Recuerda que puedes cambiar el color de la barra del menú editando el color de background.

Espero que este tutorial haya sido de tu agrado y si te sirvio no olvides compartir que nos ayuda mucho. Visita nuestro Canal en Youtube y Suscribete!.De igual forma puedes dejar tu comentario por si tienes dudas.
No olvides seguir visitando TutoEspacio.

No hay comentarios:

Con la tecnología de Blogger.