Menú de Navegación Pegajoso y Animado | HTML, CSS y Javascript

Подписаться 511 тыс.

Просмотров 34 тыс.

50% 1

En este video aprenderás como hacer un menú de navegación sticky con una animación del indicador.
Mis cursos de desarrollo web:
⭐ Curso Completo de Diseño Web Profesional:
www.desarrolloweb.io/cursos/d...
⭐ Curso Completo de React y Firebase:
www.desarrolloweb.io/cursos/r...
⭐Curso Completo de Javascript
www.desarrolloweb.io/cursos/j...
⭐ Curso Completo de PHP y MYSQL:
www.desarrolloweb.io/cursos/p...
⭐ Curso de Bootstrap 5:
www.desarrolloweb.io/cursos/b...
⭐ Curso Completo de creación de tiendas online:
www.desarrolloweb.io/cursos/t...
---
📄 Código del Proyecto:
github.com/falconmasters/slid...
Temario del video:
00:00 - Introducción
01:23 - Código HTML
08:12 - Código CSS
22:41 - Código Javascript
---
Redes Sociales:
📌 Twitter: / falconmasters
📌 Página de Facebook: / falconmasters

Наука

Опубликовано:

4 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 74

@FalconMasters 2 года назад

Si te gusto este video dale manita arriba! 👍 Y no olvides suscribirte para mas tutoriales como este.

@alfred1975k 2 года назад

A mi me gustaria ver como hacer si la cabecera esta arriba en el top y con position fixed como harias

@FalconMasters 2 года назад

@@alfred1975k Seria casi igual, no cambiaría mucho.Solamente el position en vez de ser sticky seria fixed y con un top de 0

@elisiumcosmos7600 2 года назад

Increible como dominas el tema fiera....gracias estoy aprendiendo un montón.....siempre hace falta el profesor.....gracias

@gabrielrincon6744 2 года назад

Wooow exelente , gracias falcón Master , ahora podré actualizar mi portafolio , eres el mejor . Saludos desde 🇻🇪🔥

@espinoza89cr 2 года назад

Como siempre excelente video Máster muy bien explicado y un diseño genial 💯

@faybercova 2 года назад

Gracias, bro. Más de 6 años viendo tus tutoriales y nunca bajas el nivel.

@FalconMasters 2 года назад

Muchas gracias Fayber, siempre intentando hacer videos geniales y que les sirvan a todos.

@rauli.carrasco1710 2 года назад

Fantástico video y explicación! Gracias por compartir tu conocimiento!

@BysMax 2 года назад

Mil gracias, le da un toque que flipas

@aaronvigil8480 2 года назад

Muchas gracias Falcon, como siempre.

@Andy_rivera 2 года назад

justo lo que buscaba, gracias maestro.

@Junior-mo4yr 2 года назад

Que genial amigo, justo quería hacer algo parecido me resolviste el dia jaja, muchas gracias

@jesusalexistenoriohernande6994 11 месяцев назад

Excelente contenido y excelente explicacion. Gracias por compartirlo!

@cloudstrife80 2 года назад

Eres el mejor, Falcon!

@andresa3220 2 года назад

¡Excelente! Muy buen video señor Falcon. Me encanta este tipo de contenido, son muy interesantes. ¡Saludos!

@FalconMasters 2 года назад

Me alegra que así sea Andrés Saludos!

@juanpamontoyav 2 года назад

Qué bonito el menú sería genial que le añadas un menú extensible hacia la derecha que se pueda mover con el dedo hacia la derecha para ver más elementos en el menú.. lo he visto en varias web y son bastante llamativos

@miguelangelhr956 2 года назад

Como siempre genial 🙌🏼

@FalconMasters 2 года назад

Muchas gracias!

@brunomontd 2 года назад

Justo quería aprender eso. Muchas gracias

@FalconMasters 2 года назад

Me alegra, espero que te sirva

@miguelm8566 2 года назад

Muy bueno, muchas gracias 👌🏻👌🏻👌🏻

@FalconMasters 2 года назад

Gracias!

@tatemo_labs 2 года назад

Me gustó mucho, bien chingón... gracias!

@FalconMasters 2 года назад

Muchas gracias, me alegra que así fuera!

@francorodriguez9709 2 года назад

excelente como siempre carlos!

@FalconMasters 2 года назад

Muchas gracias!

@miguelquintero5937 2 года назад

Muy bueno 👌

@FalconMasters 2 года назад

Muchas gracias!

@emmanuelsolano7206 2 года назад

Graciaaaaas!!

@Deus-lo-Vuilt Год назад

Gracias bro , espero sigas subiendo contenido

@FalconMasters Год назад

Pronto :)

@eduardoaugusto2443 2 года назад

Llevo búscando esto hace mucho tiempo

@CrafterSama Год назад

Buenísimos tus tutoriales, si lo que haces en código (nombres de variables y funciones, propiedades de css, etc) fuera en ingles fueran perfectos, jejeje!

@marce6731 2 года назад

Thanks

@jonatelo96 2 года назад

Hola, aplicaría para hacer un formulario, pero que el indicador avance cuando le de clic en un boto de siguiente y haya completado los campos? Alguna idea?

@ramoncordova8334 2 года назад

Hola, duda... no hubiera funcionado si en la parte de calcular la posición del indicador se hubiera recibido el parámetro "indice" en el forEach? Ej: entradas.forEach( (entrada, index) =>... Y hacer el cálculo con el valor del index en vez de usar la función indexOf?

@marlonchavezhuaman4173 2 года назад

Gracias por tu enseñanza , te sigo por me gusta la programacion pero tambien quiero sabe crear juego de Dinosaurio se podra hacer . gracias

@martindej.3890 2 года назад

Hola tengo una duda, al momento de multiplicar el tamaño del indicador por el index de la sección, ¿como multiplica por el índice 0? Eso no es error?

@hrsmranji3764 2 года назад

Sin librerias como se debería hacer 😎 Pero no es necesario poner ese menú abajo al principio más bien pondría un botón hecho con un div qué me indique qué hay más abajo y cuando pases esa section de hero arriba automáticamente aparezca el menú ahora sobre la secciones podríamos crear un página 2 como si fueses allá pero usando url falsas y en si solo los navs o divs se reemplazan para que aumente las secciones y obviamente si vuelvas a la página 1 o 2 vuelvan a sus navs (opciones) del menú correspondiente

@sarudev 2 года назад

Muy buen video! Tengo una duda, que extensión usas para redimensionar facilmente el contenido html?

@FalconMasters 2 года назад

Hola, lo hago con Firefox, simplemente presiono Ctrl + Shift + M

@sarudev 2 года назад

@@FalconMasters Gracias, pensé que era una extensión de Google, que mala suerte

@ElMoxar 2 года назад

Excelente video!! Una pregunta, que tema usas en VSC?

@FalconMasters 2 года назад

Se llama Ayu Mirage

@ElMoxar 2 года назад

@@FalconMasters Muchas gracias amigo!

@janettita5390 Год назад

Me encantó el video, Carlos, muchas gracias. Únicamente tuve un problema, en una de las secciones sólo por agregar a un elemento contenedor un margin o un padding o un div más, me deja de reconocer esa sección y no me pinta el indicador en el menú, solo la de las demás... limpié el código varias veces y solo en esa sección me marca errores que nada tienen que ver con la lógica que aquí se explica, es meramente un problema que no entiendo del contenido HTML y CSS pero como ya dije, ya limpie el html y css y todo está bien anidado, no entiendo :(

@BlancaItzelJimenezIslas Год назад

Hola, prueba disminuyendo el threshold a 0.0, quizás la sección que no te reconoce el indexSeccionActiva es demasiado grande

@francorodriguez9709 2 года назад

hola carlos, una pregunta, y si yo quisiera hacer eso pero con hover? osea que cuando vaya scrolleando la palabra del item se sombree? es posible?

@FalconMasters 2 года назад

Claro, es la misma logica, solamente que le pones una clase active que le de el sombreado.

@teamsoftcode7883 2 года назад

En el la parte de CSS = "nav a:hover" no funciona en pantallas móviles se queda coloreado mientras que la barra azul si cambia al navegar.. existe alguna alternativa para :hover ?? o alguna manera de solucionar esto, ya que el menú esta genial pero en celulares o tableta pasa lo mencionado..

@alessochiavarino8505 Год назад

y como hago con los indicadores si tengo un sitio web y no una landig?

@vittoriocarlo1785 2 года назад

Hola Falcon. ¡Excelente! Puedes decirme como se llama el tema que estas usando? Esta bien cool!

@FalconMasters 2 года назад

Se llama Ayu Mirage

@vittoriocarlo1785 2 года назад

@@FalconMasters Gracias

@ElvisJosue98 2 года назад

Una pregunta, ¿Funcionaba poniéndole al indicador tamaño de 20%? (Ya que son 5 elementos)

@FalconMasters 2 года назад

Si, aunque si luego pones 4 elementos no el 20% no te va a funcionar. Hay que calcularlo de forma dinamica.

@ElvisJosue98 2 года назад

@@FalconMasters Oh, entiendo, muchas gracias. Excelente video por cierto!!

@FalconMasters 2 года назад

@@ElvisJosue98 Gracias

@Elvergalarga-vl8tg 2 года назад

estuvo genial el tutorial, pero tienes un pequeño error, y es que cuando paso desde la sección 2 a la sección 3 hace la transición, pero no lo hace de vuelta cuando voy desde la 3 hacia la dos, si no que espera a que llegue a la 1 para empezar de nuevo, de resto un muy excelente video gracias por tus enseñanzas

@yuncheat0374 2 года назад

No borraste algo mientras revisabas el código?, porque a mí me va perfecto

@felipelopez7992 2 года назад

Tienes algo mal dice jajajaja, el que la cagaste fuiste tu xd

@victorvivia529 2 года назад

Si quisiera hacer un menú asi pero con la diferencia de que cada pestaña esté oculta, ¿bastaria con usar javascript para ocultar y volver visible cada una se las secciones en el momento que se seleccionen en el menú?

@FalconMasters 2 года назад

Si, puedes darte una idea de este tutorial que hice: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HOezqHXVVxA.html

@victorvivia529 2 года назад

@@FalconMasters Muchas gracias! 🙏