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>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.