Saltar al contenido

Bonito menĂș responsive desplegable para Blogger

menĂș responsive para un blog de bloger

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.

Contenido

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>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: " ";
  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>a {
  background: #FC6D58;
  color: #fff;
}

.menu li:hover>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: " ";
  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>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>a {
  background: #FC6D58;
  color: #fff;
}

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

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

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

.menu li>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 como «Sub-Menu» por las secciones que tengas o desees. Elimina todos los símbolos «#» 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   = $('#resp-menu');
  var menu  = $('.menu');
  $(touch).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
  });
  $(window).resize(function(){
    var w = $(window).width();
    // breakpoint
    if(w > 767 && menu.is(':hidden')) {
      menu.removeAttr('style');
    }
  });
});
</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.