Тёмный

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

Carpi Coder
Подписаться 14 тыс.
Просмотров 56 тыс.
50% 1

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/carpicoder/menu-ha...
✅ Resultado final: carpicoder.github.io/menu-ham...
Redes
📷 / carpicoder
🐦 / carpicoder
🚀 / discord
👨🏽‍💻 github.com/carpicoder
💼 / matiascoletta
Donaciones
🤙 carpicoder.com/donaciones
Contacto
✉️ hola@carpicoder.com
🌐 carpicoder.com

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

 

25 янв 2023

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 140   
@sancochooe840
@sancochooe840 9 месяцев назад
Estoy aprendiendo y busqué muchísimos tutoriales para mi proyecto pero este fue el único que entendí, explica muy bien. Nuevo sub!
@alejandrotapiaflores9969
@alejandrotapiaflores9969 9 месяцев назад
Tantos videos que existen en la web, y eres de los pocos que lo hacen muy bien explicados, concretos y directos. Excelente video¡
@Guitarra-Sur
@Guitarra-Sur Год назад
Me gusta tu dinámica, vas haciendo y explicando que hace cada cosa. Gracias!
@carpicoder
@carpicoder Год назад
Gracias Gabriel por el comentario! 🙌
@JdorNumero12
@JdorNumero12 3 месяца назад
Me encanta como explicas amigo, simple, rápido, dinámico.
@joaquin_carp
@joaquin_carp 9 месяцев назад
Carpi con la facilidad y sencilles que explicas.. La tenes re clara. Gracias por el video. Saludos loco
@superjulPia
@superjulPia Год назад
Muchas gracias por compartir tus conocimientos y por tu tiempo!!Es de GRAN utilidad 💯👏🙌
@ivanjaviergonzalez7835
@ivanjaviergonzalez7835 3 месяца назад
sos un genio, gracias por tus videos y aportacion a la comunidad, Nuevo Sub merecido !!
@carlosmontanez4339
@carlosmontanez4339 3 месяца назад
sos un genio, muy claro en tu explicación, en alguna parte ibas muy rapido, pero te entendí claro, asi que seguire aprendiendo contigo.
@lunaip4529
@lunaip4529 11 месяцев назад
Me encantó Carpi!! Muchas gracias ♥
@wolfywhite106
@wolfywhite106 7 месяцев назад
Este vídeo me ayudó mucho en el proyecto final que me pidió mi profesor de programación... gracias!!!!
@elmazi22
@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
@carpicoder Год назад
✨❤
@margarethramos8984
@margarethramos8984 3 месяца назад
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!!
@DavidLopezCubo
@DavidLopezCubo 8 месяцев назад
Muy buen laburo loco! clarisimo y facil!
@alejandrocotishow7604
@alejandrocotishow7604 8 месяцев назад
Felicitaciones muy buena y profecional tu explicacion
@gabrieltoledo9489
@gabrieltoledo9489 Год назад
Noo!! Que genio Carpi. Justo lo que te estaba necesitando. Muchas gracias.
@carpicoder
@carpicoder Год назад
👌❤
@gustavoalejandrocanulmena3301
@gustavoalejandrocanulmena3301 9 месяцев назад
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.
@jorgeandresromano2663
@jorgeandresromano2663 6 месяцев назад
gracias hermano! muy util y entendible todo! Saludos
9 месяцев назад
Excelente, me encantó. Muchísimas gracias por este video.
@jaimebravo2762
@jaimebravo2762 9 месяцев назад
Muy buena la explicación y el tiempo empleado. Gracias
@invazorzimutube
@invazorzimutube 11 месяцев назад
Muchas gracias por el tutorial me ayudó mucho!
@Adormir123
@Adormir123 4 месяца назад
simple y practico, muchas gracias!
@joelrm1786
@joelrm1786 10 месяцев назад
Muy buen video, lo ocuparé para un proyecto, es fácil y muy sencillo de entender. Explicas muy bien, nuevo sub❤
@carpicoder
@carpicoder 10 месяцев назад
Muchas gracias amigo! 💖💪🏼✨
@Irvin_Gonzalez
@Irvin_Gonzalez 10 месяцев назад
Gracias hermano de corazón te agradesco por este tutorial me gustó mucho tu forma de explicar
@josedavidricaldeberrocal8860
Muchas gracias Carpi por compartir tus conocimientos.
@carpicoder
@carpicoder Год назад
Gracias José por el comentario! 🙌
@julianricardo8893
@julianricardo8893 5 месяцев назад
Muchas gracias, me sirvió. Me suscribo!
@migueqm
@migueqm Год назад
Termino de ver el video, esperemos que ahora lo pueda implementar en mi proyecto. Saludos desde Colombia, ahí voy comentando como va yendo.
@user-jo5qr9qh1h
@user-jo5qr9qh1h 6 месяцев назад
muchas gracias bro me sirvio muchisimo para aprender
@tomasvainstub2184
@tomasvainstub2184 3 месяца назад
Muy buen video! Gracias
@SolaPazEnergy
@SolaPazEnergy 7 месяцев назад
Me gustó tu trabajo. Saludos
@brayamstivencamposospina3350
@brayamstivencamposospina3350 3 месяца назад
excelente video muchas gracias bro
@Niiko0akd
@Niiko0akd 8 месяцев назад
Esto es simplemente excelente.
@pablodemartini6318
@pablodemartini6318 Месяц назад
Buenisimo, re bien explicado. Gracias por el video.
@TulikoKKo702
@TulikoKKo702 8 месяцев назад
muy buen video, gracias!
@walter3867
@walter3867 9 месяцев назад
Me ayudo muchísimo, enserio gracias :3
@amneriscalle
@amneriscalle 6 месяцев назад
Genio. ¡Gracias!
@renzomonico4018
@renzomonico4018 9 месяцев назад
Buenísimo tutorial!
@user-pe8cd6sc8q
@user-pe8cd6sc8q 4 месяца назад
Eres un genio, gracias
@pmgutierrez2700
@pmgutierrez2700 11 месяцев назад
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
@gleide-coelho
@gleide-coelho 11 месяцев назад
Muy bueno!!!! Muchas gracias!!!!
@dahianamachado-nr9pp
@dahianamachado-nr9pp 4 дня назад
Muchas gracias muy buen video!
@booblock
@booblock 10 месяцев назад
Que sencillo lo haces carpi!! jajajaaj a mi me cuesta horrores, peo me ayudas muchisimo. Sos groso!
@carpicoder
@carpicoder 10 месяцев назад
🙌🚀👌💪
@kokucsm
@kokucsm Год назад
Gracias brooo!!! muy util :D
@eross_sw
@eross_sw Год назад
AMIGO probe cantidad de formas, nisiquiera bootstrap me convencia y venis vos y me solucionAS las VIDAAA MIL GRACIASSS
@user-gs9ly2fx2e
@user-gs9ly2fx2e 5 месяцев назад
Buen video!
@facundosolan90
@facundosolan90 6 месяцев назад
Siempre un lujo ver tus videos querido Carpi! Como hago para ve el navegador al lado del codigo que voy escribiendo??
@malaganx236
@malaganx236 2 месяца назад
Grande Maestro!!!
@soymatrixmoy
@soymatrixmoy 7 дней назад
Gracias por explicarlo tan claro 🎉
@arapolanco6762
@arapolanco6762 6 месяцев назад
Genial, gracias
@carlospaz3277
@carlospaz3277 Месяц назад
Super, excelente explicación
@TheBryanRedz
@TheBryanRedz Год назад
Muy buen video sencillo, claro y rápido. (y)
@carpicoder
@carpicoder Год назад
💪🚀
@cintiavicente8883
@cintiavicente8883 22 дня назад
Qué bien que explicás!
@nicolasquinteros450
@nicolasquinteros450 Год назад
noooo esta TREMENDOO
@leonardofabioacevedo2566
@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
@jonathang6119
@jonathang6119 8 месяцев назад
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?
@Sant3tsu
@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
@fedex224
@fedex224 11 месяцев назад
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
@carpicoder 11 месяцев назад
Live Preview! Gracias por el lindo comentario 💖✨
@ikki5414
@ikki5414 2 месяца назад
Gracias me sirvió
@joselow54321
@joselow54321 8 месяцев назад
rapido y sencillo que crack
@b.y.sproduccionesbyronmora3605
@b.y.sproduccionesbyronmora3605 3 месяца назад
que tal amigo esta muy bien, pero no entiendo que hice mal porque no me quiere abrir el menú, dependerá del js?
@zoldyck2031
@zoldyck2031 4 месяца назад
que crack!
@henryazogue9657
@henryazogue9657 Месяц назад
te lo agradezco mucho - e pasado mucho tiempo para buscar una respuesta --- sos muy creativo 😃
@user-iz7ww1wc4d
@user-iz7ww1wc4d 11 месяцев назад
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
@ladelec
@ladelec Месяц назад
Excelente! una pregunta: como sería la modificación para que un item tenga varios subitem y solo se vean al hacer click?
@CitizenWorld81
@CitizenWorld81 Месяц назад
Me encantó el video
@manuelgattone2855
@manuelgattone2855 Год назад
Una pregunta que pagina web usas para sacar las imágenes? Porque no consigo imágenes buenas , no iconos sino imagenes
@faq3154
@faq3154 Год назад
Buen video pa
@WhiteWolf-fm7yg
@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-sl8ng9es8m
@user-sl8ng9es8m 7 месяцев назад
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!!
@alldigitall
@alldigitall 7 месяцев назад
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.
@juansanchez2868
@juansanchez2868 Год назад
Gracias buen video
@Joel-kr6ex
@Joel-kr6ex 5 месяцев назад
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.
@nicoqk
@nicoqk 3 месяца назад
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!
@brayamstivencamposospina3350
@brayamstivencamposospina3350 3 месяца назад
Tengo una pregunta cuando selecciono un ítem del menú no me cierra automáticamente el menú ... que debo hacer ?😢
@AgustinFleitasFaes
@AgustinFleitasFaes 4 месяца назад
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 (?
@lucilaromandini7946
@lucilaromandini7946 8 месяцев назад
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
@agustinbraco1208
@agustinbraco1208 Год назад
Gracias Carpi!
@carpicoder
@carpicoder Год назад
@mr.fabian8471
@mr.fabian8471 Год назад
Gracias carpi Master !!
@carpicoder
@carpicoder Год назад
@seleneneptuno2578
@seleneneptuno2578 9 месяцев назад
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..
@osposto
@osposto 13 дней назад
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.
@mrsully2165
@mrsully2165 9 месяцев назад
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
@carpicoder 9 месяцев назад
Muchas gracias por tan lindo mensajito y por tu apoyo! 🫶🏼💪🏼
@user-qv5et1ee7w
@user-qv5et1ee7w 8 месяцев назад
El video esta bueno gente
@salvadorambriz1406
@salvadorambriz1406 11 месяцев назад
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
@carpicoder 11 месяцев назад
Se puede transicionar con transform y cambiando el display por visibility y opacity, que son propiedades transicionables!
@mariavictoriaojeda4090
@mariavictoriaojeda4090 Месяц назад
excelente!!!!
@carpicoder
@carpicoder Месяц назад
💪🏼💯
@yuliannydiaz9259
@yuliannydiaz9259 10 месяцев назад
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
@gustavogromas5822 7 месяцев назад
no tenes error, esta usando una linea no explicada en el video, fijate linea 8 html.
@victorianomorales3424
@victorianomorales3424 Год назад
El verdadero sensei
@carpicoder
@carpicoder Год назад
😂🙌🏼💖
@carmelogambale2418
@carmelogambale2418 Год назад
Pregunta carpi se le puede agregar alguna animacion como que se vea más suave el abrir y cerrar el menu?
@carpicoder
@carpicoder Год назад
Podrías agregarle una animación si en lugar de "display: none;" usás "opacity: 0; visibility: hidden" cuando está escondido y "opacity: 1; visibility: visible" cuando tiene que estar visible. De esta manera, podrías darle simplemente una transition con el tiempo que quieras que tarde en aparecer!
@thevoicep6562
@thevoicep6562 Год назад
Enseñanos como crear la parte de administrador de un sitio web para crear nuevas publicaciones 🙌
@3DRACING27
@3DRACING27 7 месяцев назад
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
@abrahamotero1451 5 месяцев назад
Lograste solucionarlo?
@francoz8568
@francoz8568 Год назад
Hola, una consulta, cuando elegis una de las opciones no se cierra solo el menu no? como se podria solucionar eso? porque yo hice ya el menu desplegable pero cuando elijo una opcion, nose como hacer que se cierre el menu solo
@carpicoder
@carpicoder Год назад
Podrías ponerles un addEventListener a los botones para que hagan lo mismo que hace la X!
@mareklara
@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
@carpicoder Год назад
Exacto, con un forEach en todos los "li > a" deberías poder hacer eso también!
@micacorvera4300
@micacorvera4300 Год назад
muy bueno!!! muchas gracias por el video, me solucionó la vida jajsjs. Tengo una consulta, ¿Cómo hago para que cuando abra mi página en mobile, no aparezca el menú ya abierto?
@carpicoder
@carpicoder Год назад
Hay que iniciarlo oculto! Fijate que por defecto arranca oculto en mis ejemplos!
@seleneneptuno2578
@seleneneptuno2578 9 месяцев назад
@@carpicoder cómo sería iniciarlo oculto? no puedo solucionar ese problema
@Sewaskian
@Sewaskian Год назад
Hola, gracias por el video. Tengo una consulta: el código de JS (hamburguesa) lo escribí en un documento de JS donde ya tenía el código de un slider (sin que un código interviniera con el otro) y lo agregué con el script al HTML, sin embargo, no pasaba nada en el menu al darle click. Luego creé otro documento de JS (aparte de donde tengo el Slider) y pasé el código de JS para el menu de hamburguesa (y agregué el nuevo documento JS al HTML) y si funciono. Mi pregunta es: ¿Hay alguna forma de guardar varios códigos dentro del mismo documento de JS y que funcionen de manera independiente? ¿O es necesario crear un nuevo documento de JS para cada codigo de JS? saludos.
@carpicoder
@carpicoder Год назад
Hola Sebas, no hace falta que crees varios JS diferentes, lo más probable es que había cosas de tu slider que interferían de alguna manera; podés volver a ponerlo en el anterior y fijarte si tenías algún error en la consola al apretar el menú, pero en principio si tenés dos JS separados y funcionan, ponerlos juntos en el mismo archivo no deberían cambiar absolutamente nada!
@javisuarez8827
@javisuarez8827 Год назад
El mejor
@carpicoder
@carpicoder Год назад
❤✨🚀
@monicarestrepo2113
@monicarestrepo2113 3 месяца назад
hablas muy cute! videito ..
@bluefutbol1515
@bluefutbol1515 Год назад
Amigo busco uno asi pero en mobile firts :c
@OscarRomanpe
@OscarRomanpe Год назад
Muy bueno. Sin embargo, en un website, al hacer clic, no funcionaba el menú mobile. Viendo la pestaña de sources, salía el error "uncaught type error cannot read properties of null (reading 'addeventlistener')". Al final, en el HTML se tuvo que poner el llamado del JS al final de la página, terminando el body.
@carpicoder
@carpicoder Год назад
Siempre el JS al final, y ojo que addEventListener va con sus mayúsculas correspondientes!
@evelynnobille5139
@evelynnobille5139 29 дней назад
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
@carpicoder 28 дней назад
😅 Es bastante sencillo, sobre todo la parte de JS!
@yaircarpinteiro2641
@yaircarpinteiro2641 10 месяцев назад
buen video de lo aplique a mi página pero cuando hago scroll y quiero volver a utilizar el menú ya no funciona
@yaircarpinteiro2641
@yaircarpinteiro2641 10 месяцев назад
olvídalo ya lo solucione había un estilo que afectaba él funcionamiento pero gracia muy buen video y explicas excelente
@elmaguez
@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
@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!
@LucasDessous
@LucasDessous Год назад
Me gusto el video pero tengo un problema que cuando del inicio voy a otras secciones el menu no me aparece
@carpicoder
@carpicoder Год назад
Seguramente te falte conectar el JS en los demás!