Aprende como hacer un menú de navegacion pegajoso con deslizamiento.
Uno de los efectos mas interesantes en menús de navegacion es el famoso formato sticky o también conocido como menú pegajoso. Este menú de navegacion nos permite tener el menú de navegacion (o cualquier otro elemento) en donde queramos, pero al momento de scrollear y bajar en la pagina al llegar a su tope el menú quedara pegado a este por lo que en todo momento estará en pantalla.
Aquí tienes un demo de este interesante menú:
http://falconmasters.com/demos/menu_pegajoso/
Recursos:
Jquery: http://code.jquery.com/jquery-latest.js
Tutorial:
Para comenzar tenemos que hacer la estructura básica del header y del menú, yo en mi caso voy a crear la estructura que te mostré en el demo. También es importante que recuerdes que para este menú tenemos que tener algo arriba de el, en mi caso un logotipo.
La estructura html es la siguiente:
<header> <div class="contenedor"> <div class="logo"> <img src="http://dummyimage.com/200x100/000/fff&text=LOGO" alt=""> </div> <nav class="menu"> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Proyectos</a></li> <li><a href="#">Trabajos</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> </div> </header>
Como puedes ver en el header, he puesto un contenedor para el logotipo y el menu con una clase llamada .contenedor esta clase la usaremos para centrar los elementos del menú.
Después del header es importante que tengas contenido para que aparezca un scroll y puedas bajar en la pagina para ver el menú en acción.
Para el código CSS no hacemos nada especial, un simple y ordinario menú como los que hemos hecho toda la vida.
Código CSS del menú:
.contenedor {
width: 95%;
max-width:1000px;
margin:auto;
}
.contenedor p {
margin-bottom:40px;
}
header nav {
background:#3498db;
margin-bottom:10px;
}
header nav ul {
list-style: none;
overflow: hidden;
}
header nav ul li {
float: left;
}
header nav ul li a {
display: block;
padding:20px;
color:#fff;
text-decoration: none;
}
header nav ul li a:hover {
background:#2980b9;
}
/* --- Clase que agregaremos cuando el usuario haga scroll --- */
.menu-fixed {
position:fixed;
z-index:1000;
top:0;
max-width:1000px;
width:100%;
box-shadow:0px 4px 3px rgba(0,0,0,.5);
}
Lo único importante a resaltar en este código CSS es que al final tenemos la clase .menu-fixed esta clase no nos sirve de momento, pero lo que vamos a hacer con ella es que cuando el usuario haga scroll y baje en la pagina, al llegar a cierto punto le diremos con jquery que agregue esta clase a nuestro nav . Esta clase lo que nos permite es posicionar el menú fijo a pantalla en lo mas alto de la pagina, esta clase nos sirve para ver cual sera el estado del menú al hacer scroll y llegar a determinado punto.
Esta clase la puedes agregar al nav si quieres probar como se vería y/o editar los estilos, pero recuerda que la debes de borrar cuando termines de probarla o trabajar con ella.
Lo siguiente es hacer es agregarle la clase .menu-fixed al menú una vez que llegue a determinado punto. Cual es ese determinado punto? Bueno pues cuando la posición del scroll llegue al inicio del menú. Pero esto lo vamos a hacer con una condicional, asi que aquí pongo el código y ahora lo explico.
Código Jquery:
$(document).ready(function(){
var altura = $('.menu').offset().top;
$(window).on('scroll', function(){
if ( $(window).scrollTop() > altura ){
$('.menu').addClass('menu-fixed');
} else {
$('.menu').removeClass('menu-fixed');
}
});
});
El codigo es sencillo, pero vamos por partes, primero queremos saber la distancia entre el menu y la parte mas alta de la pagina, asi que guardamos en una variable llamada altura este dato, para sacarlo hacemos uso del objeto offset.
Después vamos a ejecutar un evento, cada que el usuario haga scroll, es decir tanto si baja en pagina o si sube. Cada que haga scroll y ejecutemos este evento vamos a lanzar una condicional que revisara si la posición del scroll es mayor a la altura, si es asi, agregara la clase .menu-fixed, de lo contrario la va a quitar, para que el menú regrese a su posición original.
Y con esto tendríamos nuestro menú de navegacion listo. Recuerda que con la clase .menu-fixed puedes hacer lo que quieras, puedes hacer que al bajar en la pagina el menu se quede pegado pero que tenga el 100% de ancho, para eso a nuestra clase .menu-fixed le haríamos las siguientes modificaciones:
.menu-fixed {
position:fixed;
z-index:1000;
top:0;
/*max-width:1000px;*/
left:0;
width:100%;
box-shadow:0px 4px 3px rgba(0,0,0,.5);
}
Simplemente agregamos un left:0; y le quitamos la restricción del ancho de max-width:;
Espero que te haya gustado este tutorial, comenta que te pareció, si te gusto y nos vemos en otro tutorial!
Video tutorial: Como hacer un menú pegajoso / sticky menu con HTML, CSS y Javascript
¡Hoy estoy de suerte! Justo ahora había acabado el header de mi web ( con tu curso :P) y me he dicho: Estaría muy bien que pudiese hacer que al hacer scroll down en mi web el estuviese de forma fija!!
¡Y aquí llegas tu! xD
¡Muchas gracias por tus fantásticos tutoriales y te deseo un feliz 2015!
¿PD: Dónde puedo hostear mi web gratis?
mira este tutorial https://www.youtube.com/watch?v=SMlT8qt-Poo suerte
oyes el link se le puede cambiar , vi que tu tenias creo que unos numeros por ahi , era jpr8018.comuv.com .. pon tu que quiero poner mi pagina , bueno el link de mi pagina asi (ejemplo) : http://www.Cultura-Mexicana.comuv.com se puede ? o si quiero poner el nombre de una empresa se puede ?
y la otra pregunta es puedo modificar el contenido de la pagina una ves estando en linea ?
porfa me gustaria que me aclararas es dudo amigo , ante mano muchas gracias
Te recomiendo hostinger, te dan sitios gratuitos, lo único que tienen ciertas condiciones en la estructura del dominio, los .com son pagos, pero hay muchos .algo que son gratuitos, suerte con ello !
se que llego un poquito tarde pero te recomendare http://www.aldeahosting.com
Hola que tal FalconMaster, buen tutorial mi pregunta es como agregar un submenu en proyectos en el menu que creaste, tendria que darle los mismos valores que el menu en el css o crear otra clase gracias espero tu respuesta.
que te refieres con sub menú un menú desplegable ?
Un Dropdown menu pero que sea Fijo (pegajoso como el tutorial).
Ahh en ese caso pones los mismos valores
Y si lo quieres hacer desplegable solo tienes que
solamente agregas otro ej:
Inicio
Sub menú 1
Sub menú 2
Blog
Proyectos
Trabajos
Contacto
y en el inicio quedaria un sub menú pero tienes que modificar el css
Estimado muy buen post y que bien explicado, solo un alcance: Yo hubiera puesto la palabra «Fijo» en ves de «Pegajoso» le da otro toque mas sobrio. Muchas gracias por el aporte y el vídeo espectacular…
En el pagina web que estoy desarrollando en estos momentos existe un
salto cuando se hace la acción de scrolldown, es decir, el texto es
cubierto por el stickymenu. ¿Como podría solucionar ese salto?, ¿Hacer
un salto mas orgánico?
Haciendo que cuando cambie el menu tambien le agregamos un padding-top al body con el tamaño del alto de la barra.
una pregunta de donde sale la variable altura y porque no corre en chrome
gracias EXCELENTE TUTORIAL
hola, primero que todo gracias por tus tutoriales, por otra parte hoy se me dio por probar este menú en un móvil y me me di cuenta que no corría algún consejo?
Me parece muy extraño, debería funcionar correctamente.
Hola que tal, sabes me gustó mucho tu video sin embargo no me gusta como se ve el logo en la parte de arriba, podrías darme un consejo de como agregarlo para que quede a la misma altura del menú y que permanezca fijo con el menu?. De antemano gracias, saludos :)
Hola, gran ejemplo :) una pregunta como puedo centrar los menus ?
Hola, excelente menú pero una pregunta que a lo mejor muchos que comenzamos en el mundo de la programación nos preguntamos como puedo agregar sub menus en este mismo menú que creaste, espero me puedas ayudar muy buena pagina saludos :)
Oye Amigo se lo puse a mi menu con animaciones y funciona solo que al menu se le ven los botones arriba como le ago
Excelente tutorial..!! Lo he seguido paso a paso, pero no me funciona, no se queda pegado el menú, tampoco me indica la distancia que tengo de la parte superior al menú. Estoy utilizando el navegador Chrome Al parecer no me asume el archivo main.js. Quedo atento a su respuesta. Desde ya muchas gracias.-
pudiste resolver??!!! a mi me pasa igual como que no asume el main js porque cuando pongo la clase de menu fixed si lo agarra.
Con Jquery se hace ya dinámica la página? Es decir ya no se puede subir a google drive?
Hola, me gustaría saber cómo integrar la caja del buscador a la barra de menú. No encuentro algo que me funcione, llevo tiempo buscándolo :/
Que tal, como puedo incorporar los «iconos de icomoon» a la barra
Hola, me parecen perfectos tus cursos en verdad estoy fascinado pero tengo una duda, se pueden incluir submenus en el scroll?
Amigo, ese menu pegajoso no funciona bien en google chrome.
En internet explorer funciona a la perfección.
Saludos.
no me funciono. El menu no se queda pegado cuando hago scroll y no se porque.
Mentiras, si funciona habia colocado una letra de mas en el codigo html.
Como le agrego sub-menus :/
una pregunta de donde sale la variable altura y porque no corre en chrome
gracias EXCELENTE TUTORIAL
Hola, Arturo me podrias ayudar, trato de agregar un logo en la barra de menu pero se sale del cuadro, estoy seguro que lo hago mal pero no se como hacer que para este todo bien. Tambien quisiera que fuera al width 100% siempre (cuando use scroll y al top). Esto es lo q me pasa. El primero es como quisiera q se viera y el segundo es como se ve. Gracias.
Que buen aporte todo lo que usted hace se entiende a la 100% es muy confiable su fuente le agradezco infinitamente por cada aporte que hace sea complejo o simple son de mucha importancia Muchas gracias y saludos desde colombia!!
Es responsive??
¡Muchas gracias Crack!
Excelente tutorial, muy bien detallado. Me ha sido de gran ayuda.
¡¡Ayuda!!
¿Como puedo hacer que los elementos queden centrados? & no alineados a la izquierda
Gracias.
Hola, como hago para que la transición al menu-fixed sea mas suave??
muito obrigado pela ajuda! meu site ficou com um visual bem melhor agora c:
saludos esta viendo el tutorial, pero me surge una duda con bootstrap como podría logar el menu como este ejemplo?
http://www.andreagalanti.it/lab/flatfy/
Mueve tu nav a la parte donde quieras que el menú aparezca, eso hice yo.
Hola, ¿cómo se podría hacer el siguiente efecto: http://www.kemtecnia.com? Tiene un sticky menú, pero el slider hace algo diferente.
Gracias, excelente tutorial.
Que buen toturial hermano. !Felicidades! Oye ¿Que software usas para diseñar las páginas web?
Saludos hermano y gracias por compartir tus tutos.
Muy bueno el artículo :) Gracias por compartirlo!
hola me gusto mucho solo tengo una duda como puedo anexar submenus ya lo intente agregando la indicacion en el css pero no se
una enorme pregunta, en primera explicare un poco, al principio lo intente y no me quedaba, ahora ya tengo este mismo ejemplo en mi diseño, me queda igual , pero en lugar del menú quiero una imagen, que la imagen se quede fija del mismo modo que el menú ¿como edito el código para que haga lo mismo con una imagen?
buenas tardes como hago yo este efecto en joomla en la plantilla gantry
Tengo un problema ocupo un menú que al darle click al botón este me cargue otra pagina sin salirme de la principal.
como podría hacer eso?
estoy haciendo este menu y uso las grillas con bootstrap para organizar mi contenido lo que sucede es que cuando agrego la clase col-xs y las otras y bajo con el scroll el contenido se superpone con el menu y no se por que
Tengo un problema, he intentado hacer el menu pero la parte del javascript no me funciona el adobe dreamweaver me pide que ponga use strict; y cuando lo pongo en la segunda linea ya no me da error pero el menu no se fija de ninguna de las formas
como se llama este editor de codigo??? lo puedo instalar gratis en linux??
Ya probé todas las opciones, no me queda el sticky, copie todo tu código, probé los diferentes archivos de jquery, baje la versión que tienes de jquery y no me resulto.
Uso win 7 y estoy programando con Dreamweaver cs6.
con tu ayuda logre colocar una imagen pegajosa, y la coloque a un lado del menu, a simple vista es un efecto bastante bueno ya que yo le coloque flex y al pasarse de la altura la imagen se sale de la caja y las demás crecen ocupando el espacio de la imagen que estaba antes ademas de que la utilizo para volver como ancla colocando un efecto lento también con jquery, eres un grande!
Excelente tutorial..!! Lo he seguido paso a paso, pero no me funciona, no se queda pegado el menú, tampoco me indica la distancia que tengo de la parte superior al menú. Estoy utilizando el navegador Chrome Al parecer no me asume el archivo main.js. Quedo atento a su respuesta. Desde ya muchas gracias. :/
Gracias por este artículo! Para artículos como este recomiendo visitar este otro sitio: https://www.cssblog.es
Hermano eres lo maximo!, no te imaginas cuanto ayudas
Muchas gracias, funciona perfecto
podrias hacer un tutorial, de como ocultar la barra de redes sociales que tienes en tu pagina porfavor.