Aprende como hacer un menú de navegacion pegajoso con deslizamiento.

Share on Pinterest
Comparte con tus amigos










Enviar

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:

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ú:

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:

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:

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

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • joanestradac

    ¡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?

    • Nahuel Silva
      • Davis Cross

        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

    • Ezequiel Regaldo

      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 !

  • david

    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.

    • Nahuel Silva

      que te refieres con sub menú un menú desplegable ?

      • david

        Un Dropdown menu pero que sea Fijo (pegajoso como el tutorial).

        • Nahuel Silva

          Ahh en ese caso pones los mismos valores

        • Nahuel Silva

          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

  • Fascomp

    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…

  • BenjaminJ

    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.

      • Duvan Ardila

        una pregunta de donde sale la variable altura y porque no corre en chrome
        gracias EXCELENTE TUTORIAL

  • Pipe

    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.

  • Veronica O.

    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 :)

  • Daniel

    Hola, gran ejemplo :) una pregunta como puedo centrar los menus ?

  • Miguel CR

    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 :)

  • juan enrique chavez gonzalez

    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

  • Jorge_Ch

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

    • carlos sarabia

      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.

  • El Sin Nombre

    Con Jquery se hace ya dinámica la página? Es decir ya no se puede subir a google drive?

  • Kristian

    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 :/

  • Anderson Kanel

    Que tal, como puedo incorporar los “iconos de icomoon” a la barra

  • Ernesto Cavieres

    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.

  • osma

    no me funciono. El menu no se queda pegado cuando hago scroll y no se porque.

    • osma

      Mentiras, si funciona habia colocado una letra de mas en el codigo html.

  • Danny Leon

    Como le agrego sub-menus :/

  • Duvan Ardila

    una pregunta de donde sale la variable altura y porque no corre en chrome
    gracias EXCELENTE TUTORIAL

  • Gabriel Navarro

    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.

  • teveoenlaweb

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

  • Jose Barquero

    Es responsive??

  • Héctor Pinargote C.

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

  • Carlos Sotelo

    Hola, como hago para que la transición al menu-fixed sea mas suave??

  • Daniel Cardoso

    muito obrigado pela ajuda! meu site ficou com um visual bem melhor agora c:

  • Will Eduard Gmer

    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/

    • Anacleto Dino

      Mueve tu nav a la parte donde quieras que el menú aparezca, eso hice yo.

  • Jesfer

    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.

  • Adrián Arredondo

    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!

  • gavo120

    hola me gusto mucho solo tengo una duda como puedo anexar submenus ya lo intente agregando la indicacion en el css pero no se

  • Pandita Azul

    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?

  • Juan Manuel Arroyo

    buenas tardes como hago yo este efecto en joomla en la plantilla gantry

  • Alonso Núñez

    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?


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso