MENÚ HAMBURGUESA DESPLEGABLE súper fácil con HTML, CSS, y JS!

Bienvenidos a este nuevo video! 👨🏽‍💻
les enseñaré cómo hacer un menú hamburguesa personalizado con HTML, CSS y JS, para poder adaptar sus menús de navegación a mobile sin problemas 🥳
🔗 Links
✅ Repositorio: github.com/car...
✅ Resultado final: carpicoder.git...
Redes
📷 / carpicoder
🐦 / carpicoder
🚀 / discord
👨🏽‍💻 github.com/car...
💼 / matiascoletta
Donaciones
🤙 carpicoder.com...
Contacto
✉️ [e-mail]
🌐 carpicoder.com

[@alejandrotapiaflores9969]

Tantos videos que existen en la web, y eres de los pocos que lo hacen muy bien explicados, concretos y directos. Excelente video¡

[@sancochooe840]

Estoy aprendiendo y busqué muchísimos tutoriales para mi proyecto pero este fue el único que entendí, explica muy bien. Nuevo sub!

[@Guitarra-Sur]

Me gusta tu dinámica, vas haciendo y explicando que hace cada cosa. Gracias!

[@carpicoder]

Gracias Gabriel por el comentario! 🙌

[@elmazi22]

Realmente excelente. He estado buscando un tutorial para hacer un menú hamburguesa para mi primer proyecto, y la mayoría te complican. Este está super sencillo e interesante. El resultado final es muy bueno. Muchas gracias por compartir

[@carpicoder]

✨❤

[@migueqm]

Termino de ver el video, esperemos que ahora lo pueda implementar en mi proyecto. Saludos desde Colombia, ahí voy comentando como va yendo.

[@margarethramos8984]

Soy nueva suscriptora gracias por tu ayuda estoy estudiamdo diseño y desarrollo web y software y creeme que me sirvió de mucho tu video ahora lo pondre en practica!! 🎉 segui haciendo esto porfavor!!!exitos y saludos desde Honduras!!

[@booblock]

Que sencillo lo haces carpi!! jajajaaj a mi me cuesta horrores, peo me ayudas muchisimo. Sos groso!

[@carpicoder]

🙌🚀👌💪

[@carlosmontanez4339]

sos un genio, muy claro en tu explicación, en alguna parte ibas muy rapido, pero te entendí claro, asi que seguire aprendiendo contigo.

[@wolfywhite106]

Este vídeo me ayudó mucho en el proyecto final que me pidió mi profesor de programación... gracias!!!!

[@joaquin_carp]

Carpi con la facilidad y sencilles que explicas.. La tenes re clara. Gracias por el video. Saludos loco

[@gabrieltoledo9489]

Noo!! Que genio Carpi. Justo lo que te estaba necesitando. Muchas gracias.

[@carpicoder]

👌❤

[@gustavoalejandrocanulmena3301]

He estado aprendiendo por mi cuenta todo este mundo del frontend, y me ha ayudado algunos de tus proyectos :), ahora solo aprender js para seguir caminando.

[@mrsully2165]

Absolutamente perfecto :) He empezado hace una semana a aprender HTML5, CSS3 y Javascript y es un mundo totalmente nuevo para mi. Gracias por aportar toda esta información tan valiosa y dejar que quienes llegamos nuevos aprendamos un poco de todo lo que ya sabéis :) Nuevo subscriptor 100% ganado, me voy a ver todos tus videos que como estén tan bien explicados como este van a ser geniales.

[@carpicoder]

Muchas gracias por tan lindo mensajito y por tu apoyo! 🫶🏼💪🏼

[@ivanjaviergonzalez7835]

sos un genio, gracias por tus videos y aportacion a la comunidad, Nuevo Sub merecido !!

[@JdorNumero12]

Me encanta como explicas amigo, simple, rápido, dinámico.

[@eross_sw]

AMIGO probe cantidad de formas, nisiquiera bootstrap me convencia y venis vos y me solucionAS las VIDAAA MIL GRACIASSS

[@joelrm1786]

Muy buen video, lo ocuparé para un proyecto, es fácil y muy sencillo de entender. Explicas muy bien, nuevo sub❤

[@carpicoder]

Muchas gracias amigo! 💖💪🏼✨

[@josedavidricaldeberrocal8860]

Muchas gracias Carpi por compartir tus conocimientos.

[@carpicoder]

Gracias José por el comentario! 🙌

[@user-jo5qr9qh1h]

muchas gracias bro me sirvio muchisimo para aprender

[@lunaip4529]

Me encantó Carpi!! Muchas gracias ♥

[@DavidCarrizoGuitarra]

Muy lindo y divertido! Además de practico y sencillo, saludos!

[@jonatanbustillo8482]

Que alegría que no se pierde el tiempo viendo sus videos

[@polodibujanye]

*¡Lo mejor que vi. Le voy a aplicar la animacion suave para esconderlo de entrada y salida.!* *GRACIAS*

[@pmgutierrez2700]

Gracias Carpi, me ayudaste mucho , tenia una pagina web que no se podia ver en celu ahora con esta ayuda la voy a dejar para mobile

[@superjulPia]

Muchas gracias por compartir tus conocimientos y por tu tiempo!!Es de GRAN utilidad 💯👏🙌

[@johanlex2035]

se nota que hace las cosas con cariño, me agrado la explicación, lo único es que me confundió la portada porque en sí el resultado tiene unos mejores tonos, gracias

[@carpicoder]

@@johanlex2035 gracias! El cambio de portada fue un intento de ver cómo funcionan los algoritmos de KZbin jajajaja

[@enzocaceres1818]

videasoooooooooooooo!!!!

[@DavidLopezCubo]

Muy buen laburo loco! clarisimo y facil!

[@JuanHinojosa-jh7wg]

Muchas gracias, me sirivio muchisimo, sos un genio!!!

Excelente, me encantó. Muchísimas gracias por este video.

[@Irvin_Gonzalez]

Gracias hermano de corazón te agradesco por este tutorial me gustó mucho tu forma de explicar

[@jaimebravo2762]

Muy buena la explicación y el tiempo empleado. Gracias

[@alejandrocotishow7604]

Felicitaciones muy buena y profecional tu explicacion

[@facundosolan90]

Siempre un lujo ver tus videos querido Carpi! Como hago para ve el navegador al lado del codigo que voy escribiendo??

[@soymatrixmoy]

Gracias por explicarlo tan claro 🎉

[@jorgeandresromano2663]

gracias hermano! muy util y entendible todo! Saludos

[@fedex224]

Hola Carpi, excelente video, explicas super bien y claro, además explicas lo que hace cada propiedad y eso se ve poco en otros videos, seguí asi!! tengo una consulta, que extensión usas para tener el codigo y el navegador en una misma vista?

[@carpicoder]

Live Preview! Gracias por el lindo comentario 💖✨

[@henryazogue9657]

te lo agradezco mucho - e pasado mucho tiempo para buscar una respuesta --- sos muy creativo 😃

[@leonardofabioacevedo2566]

Genial como lo explicas, pero que debo hacer para que quede siempre el botón de hambuerguesa, es decir que no me aparezca el menú en el nav , solo cuando doy click en el boton quiero que aparezca el menú con las opciones. gracias

[@malaganx236]

Grande Maestro!!!

[@tomasvainstub2184]

Muy buen video! Gracias

[@dahianamachado-nr9pp]

Muchas gracias muy buen video!

[@cintiavicente8883]

Qué bien que explicás!

[@user-sl8ng9es8m]

Lo primero es agradecerte tu trabajo, y tu tiempo para nosotros es ORO! Tenía una pequeña duda, y es que, al crear el script en js, no me funciona, Podrías decirme porque podría ser?? Gracias y espero su respuesta!!

[@carlospaz3277]

Super, excelente explicación

[@pablodemartini6318]

Buenisimo, re bien explicado. Gracias por el video.

[@yuliannydiaz9259]

Excelente explicacion, solo que intente hacerlo pero me queda visible el boton de abrir cuando desplego la nav (es decir se me ven ambos botones abrir y cerrar al mismo tiempo) cual sera el error

[@gustavogromas5822]

no tenes error, esta usando una linea no explicada en el video, fijate linea 8 html.

[@Adormir123]

simple y practico, muchas gracias!

[@Sant3tsu]

muchas gracias me ayudaste un monton, lo unico vas muy rapido, lo bueno es que podemos poner pausa o retroceder, luego con pura logica, pude terminar de darle funcionalidad, para que cuando aprete una de las opciones se salga el menu, mil gracias

[@amneriscalle]

Genio. ¡Gracias!

[@julianricardo8893]

Muchas gracias, me sirvió. Me suscribo!

[@alldigitall]

Excelente tu explicación !!! Min 6:32 Si no quiero poner un botón para cerrar la nav-bar sinó que se cierre automáticamente cuando pinche un enlace en el menú nab-bar... ¿cómo se hace? Gracias.

[@SolaPazEnergy]

Me gustó tu trabajo. Saludos

[@user-pe8cd6sc8q]

Eres un genio, gracias

[@user-gs9ly2fx2e]

Buen video!

[@Hyuu17]

excelente explicacion!!!!

[@CitizenWorld81]

Me encantó el video

[@Niiko0akd]

Esto es simplemente excelente.

[@invazorzimutube]

Muchas gracias por el tutorial me ayudó mucho!

[@arapolanco6762]

Genial, gracias

[@jonathang6119]

amigo una pregunta, si quiero que al apretar el botón del menú haga una animación que vaya apareciendo de la derecha, que estilo debería de agregar para que haga esa animación?. vi que agregaste opacity en 0 y visibility en hidden pero que deberia agregar para que haga la animación?

[@ladelec]

Excelente! una pregunta: como sería la modificación para que un item tenga varios subitem y solo se vean al hacer click?

[@zoldyck2031]

que crack!

[@user-qv5et1ee7w]

El video esta bueno gente

[@brayamstivencamposospina3350]

excelente video muchas gracias bro

[@andresrosental9136]

Muchas gracias por la explicación... Tengo una consulta. Es posible hacer un menú hamburguesa sin medias querys?

[@elmaguez]

video de referencia muy bueno lo he compartido con mis colegas, aunque me queda una duda, no es de codigo, como hace para en los href poner esa linea vertical y llenar todas las 5 lineas con #? si alguien sabe muy agradecida

[@carpicoder]

Tenés que hacer clic en el primer lugar de todos, luego mantener apretado ALT SHIFT y hacer clic en el último! Si es en lugares diferentes (que no coinciden verticalmente), hacés clic en el primero, mantenés ALT y vas haciendo clic en los demás!

[@salvadorambriz1406]

Muchas gracias, super bien explicado y sencillo tu ejemplo. Hay alguna forma de que la transición entre mostrar el menu y cerrarlo sea mas amigable? Saludos

[@carpicoder]

Se puede transicionar con transform y cambiando el display por visibility y opacity, que son propiedades transicionables!

[@osposto]

Muy bueno el contenido, pero hay un detalle que me preocupa. Qué pasa si hay links activos cuando abres el menú, en el lado izquierdo, el que se encuentra en la sombra? Saludos.

[@walter3867]

Me ayudo muchísimo, enserio gracias :3

[@TheBryanRedz]

Muy buen video sencillo, claro y rápido. (y)

[@carpicoder]

💪🚀

[@ikki5414]

Gracias me sirvió

[@gleide-coelho]

Muy bueno!!!! Muchas gracias!!!!

[@nicoqk]

excelente explicación, clara y concisa! pero me surgió un problema a aplicarlo. hice el nav y debajo hay un section con un carrusel de imágenes en boostrap. cuando estoy en pantallas chicas al desplegar el menú este se ve por debajo de las imágenes del carrusel. estuve investigando y vi que se podría corregir con z-index, pero no me funcionó. podrías ayudarme? Gracias!

[@nicolasquinteros450]

noooo esta TREMENDOO

[@renzomonico4018]

Buenísimo tutorial!

[@mariavictoriaojeda4090]

excelente!!!!

[@carpicoder]

💪🏼💯

[@AgustinFleitasFaes]

Gracias por el tutorial, rey Después agregué un listener a los links de la Nav y cuando se toca alguno la Nav se cierra, quedó flamingo (?

[@3DRACING27]

gracias por el video!! me sirvió muchisimo, solo tengo el siguiente problema... cuando pongo bottom:0; el menu desplegable en vez de ocupar toda la pantalla, ocupa el mismo alto que el header, que podrá ser?... el nav list sigue bien, en vertical, pero el color de fondo ocupa el mismo alto que el header... gracias!

[@abrahamotero1451]

Lograste solucionarlo?

[@bluefutbol1515]

Amigo busco uno asi pero en mobile firts :c

[@mareklara]

me gusto mucho pero me.hubiera gustado ver cuando le das click a uno de los links, que el menu se cierre tambien. Tal vez con un forEach a los li.

[@carpicoder]

Exacto, con un forEach en todos los "li > a" deberías poder hacer eso también!

[@seleneneptuno2578]

gracias!! me re sirvió pero tengo un problema, cuando recargo la pagina en el celular me queda el menu desplegado, me lo muestra abierto predeterminado..

[@brayamstivencamposospina3350]

Tengo una pregunta cuando selecciono un ítem del menú no me cierra automáticamente el menú ... que debo hacer ?😢

[@kokucsm]

Gracias brooo!!! muy util :D

[@joselow54321]

rapido y sencillo que crack

[@lucilaromandini7946]

cuando achico la pantalla me aparece el botón de abrir pero no me abre el menu, que puede ser, segui tal cual los pasos

[@Joel-kr6ex]

como puedo hacer para que el menu desplegable al seleccionar una opcion te redirija a la seccion especificada del html y se cierre el menu desplegable? yo tengo un menu hamburguesa para movil.

[@b.y.sproduccionesbyronmora3605]

que tal amigo esta muy bien, pero no entiendo que hice mal porque no me quiere abrir el menú, dependerá del js?

[@hugocangi6214]

gracias carpi

[@hpta]

sos un capo amigazo te amo

[@evelynnobille5139]

Siempre le huí al menu hamb porque pensaba que solo un programador super sayayin podia hacerlo. No puedo creer lo fácil que era al final jaja

[@carpicoder]

😅 Es bastante sencillo, sobre todo la parte de JS!

[@WhiteWolf-fm7yg]

Excelente video, solo estoy teniendo problema que al momento de estirar de nuevo la pantalla para que se elimine el botón no aparece el el menú solo el logo... Algún consejo 😅

[@user-iz7ww1wc4d]

hermano buenas noches me encanto tu proyecto, una pregunta como lo hago funcionar, oesa q al dar clic me lleve donde quiero pero dentro del mismo, oses como un menu intradocumental

[@monicarestrepo2113]

hablas muy cute! videito ..

[@faq3154]

Buen video pa

[@renzovannucci3538]

Hola! por qué usaste un enfoque desktop first en el responsive? saludos!

[@carpicoder]

@@renzovannucci3538 Es lo que usé toda la vida y por costumbre jajaja no hay más explicación 😂

[@mr.fabian8471]

Gracias carpi Master !!

[@carpicoder]

[@agustinbraco1208]

Gracias Carpi!

[@carpicoder]

[@victorianomorales3424]

El verdadero sensei

[@carpicoder]

😂🙌🏼💖

[@juansanchez2868]

Gracias buen video