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

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 168

  • @alejandrotapiaflores9969
    @alejandrotapiaflores9969 Год назад +29

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

  • @sancochooe840
    @sancochooe840 Год назад +11

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

  • @eross_sw
    @eross_sw Год назад +1

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

  • @Guitarra-Sur
    @Guitarra-Sur Год назад +15

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

    • @carpicoder
      @carpicoder  Год назад +1

      Gracias Gabriel por el comentario! 🙌

  • @elia5gordillo827
    @elia5gordillo827 Месяц назад

    Aprendí más con este video de 15 minutos que de todo lo que me "enseñaron" en clase desde principio de año

  • @elmazi22
    @elmazi22 Год назад +2

    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

  • @carlosmontanez4339
    @carlosmontanez4339 9 месяцев назад

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

  • @migueqm
    @migueqm Год назад +3

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

  • @margarethramos8984
    @margarethramos8984 9 месяцев назад

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

  • @EliasPalacio-uw9tw
    @EliasPalacio-uw9tw Месяц назад

    wtf super bien explicado y en un periodo de tiempo muy corto, canal totalmente infravalorado, dejo mi like

    • @carpicoder
      @carpicoder  Месяц назад

      @@EliasPalacio-uw9tw 🥰🤙🏼

  • @JdorNumero12
    @JdorNumero12 9 месяцев назад

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

  • @joaquin_carp
    @joaquin_carp Год назад

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

  • @ivanjaviergonzalez7835
    @ivanjaviergonzalez7835 9 месяцев назад

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

  • @booblock
    @booblock Год назад +1

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

  • @wolfywhite106
    @wolfywhite106 Год назад

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

  • @jonatanbustillo8482
    @jonatanbustillo8482 5 месяцев назад

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

  • @borjaarquesamat6371
    @borjaarquesamat6371 Месяц назад

    Muchas gracias, me ha servido un monton, ahora intentare aprender a hacer una transición entre ambos iconos de apertura y cierre, a ver .... como lo hago jajjja, gracias de nuevo!

  • @armakaisen
    @armakaisen Месяц назад

    siiiii... super! si vueltas. Muchas gracias men! Excelente.

  • @LuisAlfonso-nica
    @LuisAlfonso-nica 3 месяца назад

    ESta buenisimo el tuto; felicidades porque yo que no he estudiado programacion solo tengo ligeros conocimientos empiricos, le he entendido mucho.

  • @alldigitall
    @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.

  • @gustavoalejandrocanulmena3301
    @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.

  • @polodibujanye
    @polodibujanye 5 месяцев назад

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

  • @pedrosuardi
    @pedrosuardi Год назад +1

    muchas gracias bro me sirvio muchisimo para aprender

  • @DavidCarrizoGuitarra
    @DavidCarrizoGuitarra 6 месяцев назад

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

  • @yuliannydiaz9259
    @yuliannydiaz9259 Год назад +2

    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 Год назад

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

  • @DavidLopezCubo
    @DavidLopezCubo Год назад

    Muy buen laburo loco! clarisimo y facil!

  • @leonardofabioacevedo2566
    @leonardofabioacevedo2566 Год назад +1

    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

  • @AgustinFleitasFaes
    @AgustinFleitasFaes 10 месяцев назад

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

  • @alejandrocotishow7604
    @alejandrocotishow7604 Год назад

    Felicitaciones muy buena y profecional tu explicacion

  • @gabrieltoledo9489
    @gabrieltoledo9489 Год назад +1

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

  • @pmgutierrez2700
    @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

  • @pablodemartini6318
    @pablodemartini6318 7 месяцев назад

    Buenisimo, re bien explicado. Gracias por el video.

  • @hpta
    @hpta 5 месяцев назад

    sos un capo amigazo te amo

  • @JuanHinojosa-jh7wg
    @JuanHinojosa-jh7wg 5 месяцев назад

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

  • @jorgeandresromano2663
    @jorgeandresromano2663 Год назад

    gracias hermano! muy util y entendible todo! Saludos

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

    Muchas gracias, me sirvió. Me suscribo!

  • @amneriscalle
    @amneriscalle Год назад +1

    Genio. ¡Gracias!

  • @malaganx236
    @malaganx236 8 месяцев назад

    Grande Maestro!!!

  • @lunaip4529
    @lunaip4529 Год назад +2

    Me encantó Carpi!! Muchas gracias ♥

  • @johanlex2035
    @johanlex2035 5 месяцев назад

    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
      @carpicoder  5 месяцев назад +1

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

  • @SolaPazEnergy
    @SolaPazEnergy Год назад

    Me gustó tu trabajo. Saludos

  • @jaimebravo2762
    @jaimebravo2762 Год назад

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

  • @mrsully2165
    @mrsully2165 Год назад +2

    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  Год назад

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

  • @josedavidricaldeberrocal8860
    @josedavidricaldeberrocal8860 Год назад +1

    Muchas gracias Carpi por compartir tus conocimientos.

    • @carpicoder
      @carpicoder  Год назад

      Gracias José por el comentario! 🙌

  • @3DRACING27
    @3DRACING27 Год назад +1

    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!

  • @Adormir123
    @Adormir123 10 месяцев назад

    simple y practico, muchas gracias!

  • @nicoqk
    @nicoqk 10 месяцев назад

    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!

  • @benjaminurquia9452
    @benjaminurquia9452 Месяц назад

    Gracias! Perfectamente explicado!

  • @henryazogue9657
    @henryazogue9657 7 месяцев назад

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

  • @cintiavicente8883
    @cintiavicente8883 7 месяцев назад

    Qué bien que explicás!

  • @Niiko0akd
    @Niiko0akd Год назад

    Esto es simplemente excelente.

  • @seleneneptuno2578
    @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
    @brayamstivencamposospina3350 9 месяцев назад

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

  • @salvadorambriz1406
    @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
      @carpicoder  Год назад

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

  •  Год назад

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

  • @arlettekid
    @arlettekid Год назад

    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

  • @dahianamachado-nr9pp
    @dahianamachado-nr9pp 6 месяцев назад

    Muchas gracias muy buen video!

  • @joelrm1786
    @joelrm1786 Год назад

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

    • @carpicoder
      @carpicoder  Год назад

      Muchas gracias amigo! 💖💪🏼✨

  • @facundosolan90
    @facundosolan90 Год назад

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

  • @Joel-kr6ex
    @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.

  • @soymatrixmoy
    @soymatrixmoy 6 месяцев назад

    Gracias por explicarlo tan claro 🎉

  • @lucilaromandini7946
    @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

  • @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

  • @enzocaceres1818
    @enzocaceres1818 3 месяца назад

    videasoooooooooooooo!!!!

  • @carlospaz3277
    @carlospaz3277 8 месяцев назад

    Super, excelente explicación

  • @Irvin_Gonzalez
    @Irvin_Gonzalez Год назад

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

  • @elmaguez
    @elmaguez 8 месяцев назад

    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  8 месяцев назад

      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!

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

    Eres un genio, gracias

  • @fedex224
    @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
      @carpicoder  Год назад +1

      Live Preview! Gracias por el lindo comentario 💖✨

  • @ladelec
    @ladelec 8 месяцев назад

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

  • @gleide-coelho
    @gleide-coelho Год назад

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

  • @TulikoKKo702
    @TulikoKKo702 Год назад

    muy buen video, gracias!

  • @jonathang6119
    @jonathang6119 Год назад +1

    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?

  • @nicolasquinteros450
    @nicolasquinteros450 Год назад

    noooo esta TREMENDOO

  • @invazorzimutube
    @invazorzimutube Год назад

    Muchas gracias por el tutorial me ayudó mucho!

  • @renzomonico4018
    @renzomonico4018 Год назад

    Buenísimo tutorial!

  • @joaquin-q4v
    @joaquin-q4v 11 месяцев назад

    Buen video!

  • @walter3867
    @walter3867 Год назад

    Me ayudo muchísimo, enserio gracias :3

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

  • @andresrosental9136
    @andresrosental9136 4 месяца назад

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

  • @renzovannucci3538
    @renzovannucci3538 4 месяца назад

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

    • @carpicoder
      @carpicoder  4 месяца назад

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

  • @CitizenWorld81
    @CitizenWorld81 8 месяцев назад

    Me encantó el video

  • @superjulPia
    @superjulPia Год назад

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

  • @arapolanco6762
    @arapolanco6762 Год назад

    Genial, gracias

  • @Hyuu17
    @Hyuu17 4 месяца назад

    excelente explicacion!!!!

  • @kokucsm
    @kokucsm Год назад

    Gracias brooo!!! muy util :D

  • @b.y.sproduccionesbyronmora3605
    @b.y.sproduccionesbyronmora3605 10 месяцев назад

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

  • @JosephGianmarcoSoberonLeon
    @JosephGianmarcoSoberonLeon Год назад

    El video esta bueno gente

  • @bluefutbol1515
    @bluefutbol1515 Год назад +3

    Amigo busco uno asi pero en mobile firts :c

  • @yaircarpinteiro2641
    @yaircarpinteiro2641 Год назад

    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 Год назад

      olvídalo ya lo solucione había un estilo que afectaba él funcionamiento pero gracia muy buen video y explicas excelente

  • @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 Год назад

      @@carpicoder cómo sería iniciarlo oculto? no puedo solucionar ese problema

  • @AndresValencia-sq9zl
    @AndresValencia-sq9zl 6 месяцев назад

    Muy bueno el video pero me sale este error al hora de hacer js, TypeError: Cannot read properties of null (reading 'addEventListener') me podrian ayudar, gracias

    • @carpicoder
      @carpicoder  6 месяцев назад

      Buenas! Pareciera por eso que estás usando mal el querySelector. Chequeá que esté bien la clase que estás poniendo, chequeá si estás poniendo el . de la clase. Si no, enviame por acá el elemento HTML y la línea del querySelector/getElement y te digo qué puede estar maln

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

  • @your_dev_joselow
    @your_dev_joselow Год назад

    rapido y sencillo que crack

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

  • @osposto
    @osposto 6 месяцев назад

    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.

  • @AymanE-b8i
    @AymanE-b8i Год назад +1

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

  • @barbaracelestediaz5338
    @barbaracelestediaz5338 Месяц назад

    como se hace para que el INICIO, te lleve directo a esa parte en la pagina? igual que en el quienes somo, etc

    • @giansdbcr4262
      @giansdbcr4262 8 дней назад

      bueno, como en este caso las etiquetas que usó en el html son (a), significa que ahi donde pone "#" debe haber un link

  • @manuelgattone2855
    @manuelgattone2855 Год назад

    Una pregunta que pagina web usas para sacar las imágenes? Porque no consigo imágenes buenas , no iconos sino imagenes

  • @TheBryanRedz
    @TheBryanRedz Год назад

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