Saltar al contenido
TutoEspacio

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=鈥檞idth=device-width, initial-scale=1, maximum-scale=1鈥 name=鈥檝iewport鈥/>
<meta content=鈥檛ext/html; charset=UTF-8鈥 http-equiv=鈥機ontent-Type鈥/> 
<link href=鈥檋ttp://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css鈥 rel=鈥檚tylesheet鈥/>

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=鈥檋ttps://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.

Setting