Cambiar estilos en el menú usando jQuery y Bootstrap.
Se nos pueden ocurrir infinidad de opciones para redecorar nuestro sitio web y si usamos Bootstrap como framework para maquetar nuestro sitio, también podemos darle un poco más de color y flexibilidad a nuestros diseños.
Queremos consgeuir que al hacer scroll y durante una altura predeterminada de nuestro documento, nuestro menu de navegación superior fijo, cambie el fondo, el color de los enlaces y el logotipo.
Construyendo nuestro menú de navegación.
Vamos a crear nuestra estructura HTML para el menú de navegación y todo lo que conlleva.
<nav id="myNavBar" class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="glyphicon glyphicon-menu-hamburger hamburger"></span> </button> <a href="#home" class="navbar-brand active smooth" title="Inicio">SERNA STUDIO LAB</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a class="smooth" title="SERVICIOS" href="#servicios">SERVICIOS</a></li> <li><a class="smooth" title="ACERCA" href="#equipo">ACERCA</a></li> <li><a class="smooth" title="BLOG" href="#info">BLOG</a></li> <li><a class="smooth" title="CONTACTO" href="#contacto">CONTACTO</a></li> </ul> </div> </div> </nav>
Con lo cual ya tenemos montado nuestro menú usando las clases que nos brinda Bootstrap.
Vamos a darle un poco de amor a las respectivas clases de BS en CSS. Estos son los míos, pero podéis usar el que queráis.
/*Navigation bg */
.navbar-toggle{
border:0;
background:none;
color:black;
}
.navbar-toggle:hover{
background:none;
}
.navbar-default{
background:none;
border-color:transparent;
transition-duration: 1s;
}
.navbar-default .navbar-brand{
color:white;
}
.navbar-default .navbar-nav li a{
color:#fff;
font-size: 9pt;
font-weight:bold;
}
.navbar-default .navbar-nav li a:hover {
color:#609cd3;
}
¿Y si ahora quisieramos que al pasar por el elemento sublogo, nuestro menú de navegación cambiase de fondo por un fondo blanco con un color de texto negro para poder distinguir el menú del resto de las secciones de nuestra página?.
jQuery entra en acción.
Y es aquí donde vamos a crear nuestro archivo js para hacer que nuestro menú cambie, dependiendo de la posición que le indiquemos.
$(document).ready(function () {
var inicio = 0;
//Aqui indicamos la posición donde deberá hacer el cambio dependiendo de la condición
var transicion = $('.navbar-header');
//Obtenemos las coordenadas de nuestro elemento mediante offset.
var offset = transicion.offset();
$(window).on('scroll', function () {
//Cuando hagamos scroll
//Nuestra variable inicio contendra el alto del elemento que le hemos asignado
inicio = $(this).scrollTop();
//Aqui hacemos la transición
if (inicio > offset.top) {
$('nav').css('background-color','rgba(255,255,255,1)');
$('nav').css('border-bottom','1px solid rgba(34,34,34,0.1)');
$('.navbar-brand').css('color','#000');
$('.navbar-nav li a').css('color','#000');
$('.navbar-toggle').css('color','#000');
}
//Si no se cumple la condición , que nos deje nuestro menú como estaba
else {
$('nav').css('background-color', 'transparent');
$('nav').css('border-bottom','0px');
$('.navbar-brand').css('color','#fff');
$('.navbar-nav li a').css('color','#fff');
$('.navbar-toggle').css('color','#fff');
}
}); //End function scroll
});
Un código bastante sencillito. Usamos varios métodos como offset(), scrollTop(), css() que si tenéis dudas podéis echar una ojeada a la documentación de jQuery.
Y con esto daríamos por finalizado este mini tutorial para cambiar los menús de navegación de nuestras plantillas usando Bootstrap y jQuery. Luego ya podéis customizarlo a vuestro gusto.
Nos vemos en próximos artículos.