✅ Cómo CREAR un MENU HORIZONTAL con HTML y CSS RESPONSIVE con JAVASCRIPT | Eduardo Fierro Pro

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

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

  • @EduardoFierroPro
    @EduardoFierroPro  2 года назад +4

    🔖 TODOS los vídeos de esta SERIE:
    ✔ Menú horizontal con HTML, CSS y Javascript ruclips.net/video/_M0K_q617Kc/видео.html
    ✔ Menú horizontal con HTML, SCSS y TypeScript ruclips.net/video/hiFle5lBqck/видео.html
    ✔ Menú horizontal en BEM con HTML, SCSS y TypeScript ruclips.net/video/UOzIhbzPcPk/видео.html
    ✔ Menú horizontal en SUITCSS con HTML, SCSS y TypeScript ruclips.net/video/_85lzdSDmtw/видео.html
    ✔ Menú horizontal en BEM con ANGULAR ruclips.net/video/yMo7nChHa8o/видео.html
    ✔ Menú horizontal en SUITCSS con REACTJS ruclips.net/video/bS2UJmROxCE/видео.html
    ____
    😊 Vídeos recomendados ruclips.net/p/PLJpymL0goBgEzi6Z5AQysL8B-PNeovcjj
    🚀ROADMAP Desarrollo WEB ruclips.net/p/PLJpymL0goBgFzvCuhEJJ29-x1H_Uo5Esv
    🤯 Explicando Web de forma diferente ruclips.net/p/PLJpymL0goBgFK8kBgMuAAGfUEuP83Q1Ab
    🙇🏻 Construyendo un Slider, Acordeón, Tabs... ruclips.net/p/PLJpymL0goBgFXN27jElLCmysKQboKW7uW

  • @Terramapar
    @Terramapar 17 дней назад

    Una clase magistral. No quería hacerlo con bootstrap y por suerte dí con el tutorial indicado. Muchas gracias

  • @SalmonAhumado
    @SalmonAhumado 2 года назад +6

    Me estás haciendo la vida más fácil con todo lo que enseñas, la primera vez que escuché este vídeo pensé que era muy complejo pero luego viendo los otros vídeos de tu colección he visto que es al revés, más simple, solo hay que saber

    • @EduardoFierroPro
      @EduardoFierroPro  2 года назад +1

      Muchas gracias por el comentario Sefora!! 😊

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

    Muy preciso en todo, bien explicado, muchas gracias ;D

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

    Crack! Excelente contenido, explicación clara y sin vueltas. Allí va mi like poderoso!

  • @LiftAndC0de
    @LiftAndC0de 2 года назад +1

    men eres un rpa gaaste mi suscripcion y mi like, habia intentado con un monton de videos anteriores que aparecian hay en mas visto pero filtre por tiempo me salio usted y me funciono ya enia 2 dias intentando esto ajajjaajja en otros videos hacia tal cual y en el navegador en js me decia que estaba desfaado es decir viejo ese comando y no me funcionaba gracias jajaja

    • @EduardoFierroPro
      @EduardoFierroPro  2 года назад +1

      Muchas gracias Hey Code!! Pues ahora a usarlo!! 😊

  • @DavidTG7
    @DavidTG7 2 года назад +1

    Hola, apenas llego al canal. Te agradezco enormemente por subir estos contenidos, me estan ayudando muchisimo!

    • @EduardoFierroPro
      @EduardoFierroPro  2 года назад +2

      Hola David!! Muchísimas gracias por tu comentario y por el apoyo!! 😊

  • @6823junior
    @6823junior 2 года назад +1

    Excelente!!! gracias por todo lo compartido, vale oro!!

  • @josuedavidkennedymamani3576
    @josuedavidkennedymamani3576 2 года назад +1

    el video que necesitaba

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

    Muchas gracias!

  • @isaiasmeza9298
    @isaiasmeza9298 2 года назад +1

    Cruck buenísimo más claro ni el agua!!
    Estaría bueno que hicieras este tipo de navbar Mobile que se adapta a toda la pantalla y que no afecte el scroll del body, JJaja no he podido solucionar ese problema, no me pierdo ni uno de tus videos.

  • @sergiomunoz8759
    @sergiomunoz8759 2 года назад +1

    Tremendo video edu, te la sacaste

  • @aldairgonzalez253
    @aldairgonzalez253 2 года назад +1

    Buenísimo, como siempre explicando cada detalle👌🏼

    • @EduardoFierroPro
      @EduardoFierroPro  2 года назад +1

      Muchas gracias Aldair por el comentario!! 😊😊

  • @juanfranciscocastillo5149
    @juanfranciscocastillo5149 2 года назад +1

    Muchas gracias por el aporte. Muy buena la explicación.Cruck!! 🙋🏻‍♂️🧠👍

    • @EduardoFierroPro
      @EduardoFierroPro  2 года назад +1

      Muchísimas gracias Juan!!! Tú sí que eres un cruck!! 😊

  • @gonzalocivita
    @gonzalocivita 2 года назад +1

    Hola. Cómo se podría lograr que cuando se hace click en el icono del menú hamburguesa, este se trasforme en un cruz.? Tengo ambos iconos y no logro que el de menú hamburgesa desaparezca cuando el menú se encuentra desplegado.

  • @TizianoMontenegro07
    @TizianoMontenegro07 2 года назад +1

    Muy buen video 👌

  • @gonzaloivangonzalez616
    @gonzaloivangonzalez616 2 года назад +2

    SOS GOD

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

    Grande bro

  • @ezequielgarcia4609
    @ezequielgarcia4609 2 года назад +1

    Que bueno, me encanta ver trabajar, eres genial, y estoy ansioso por verte con typescript, angular y react js, en entorno más profesional 😜. Aprendo bastante contigo 👏🏼👏🏼👏🏼. Saludos desde Jerez. Un saludo

  • @menabytes8653
    @menabytes8653 21 день назад

    Hola que tal, me pasa que cuando abro el archivo html en el navegador no aparecen los estilos y cuando lo abro en vsc si aparecen los estilos, alguien sabe si puede tratarse del navegador? porque ya he hecho otros sitios y lo abre sin problemas sin el vsc el navegador que uso es Brave

  • @estebansierragoyeneche5030
    @estebansierragoyeneche5030 2 года назад

    Eduardo, muy bueno el video, muy bien explicado, solo tengo una duda, por que pusiste el script arriba de de todo cuando en muchos otros canales se recomienda ponerlo antes de finalizar el body?

  • @laurasilva4286
    @laurasilva4286 2 года назад

    Cuando presiono el botón si tengo contenido debajo se mueve todo el contenido ¿Cómo hago si quiero que no le afecte a lo que está debajo? Y otra cosa, toggle no esta deprecated?

  • @victormanuelmartinezgarrid9964

    Eduardo soy principiante en esto de la programacion, como puedo hacer que varios botones se desplieguen como el primer ejemplo que realizo, ya que no se mucho de javascript

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

    Excelente contenido. Pero me surgió una pregunta. Al momento de inspeccionar el ul cuando no esta activado en el diseño responsive salen los elementos si pasamos el mouse encima. ¿Hay alguna forma de que no salga en el inspeccionador? Vi que con diplay none y bloc pero no los aparece de golpe y los desaparece igual
    Gracias crck

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

    bro una consulta hice el tutorial, pero le agregue una imagen de fondo. El tema es q cuando el menu se despliega la imagen se baja y me gustaria solucionar eso, me puedes ayudar?

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

    Buenas! Cuando achico la pantalla a 480px el nav no baja, se queda donde está ocupando el 100% :S, puse el reset completo, lo copié desde GIT. Excelente contenido! Saludos desde AR

  • @matiaslobosg
    @matiaslobosg 2 года назад +1

    Hola! Quería saber si cual seria la forma de crear varios botones con distintos menú, pero que al hacer clic en un botón (hamburguesa 1 por ejemplo) los otros se oculten. Ojalá me haya expresado bien.
    Saludos!

    • @matiaslobosg
      @matiaslobosg 2 года назад +1

      Lo logré hacer, pero creo que es la manera menos eficiente:
      Defino las constante y selecciono el id del div a mostrar
      const menuMovil1 = document.querySelector('#menumovil1')
      const menuMovil2 = document.querySelector('#menumovil2')
      Al presionar el boton 1, mostrará el menuMovil1 y el resto le quitará la class activo
      function btnMovil1(){
      menuMovil1.classList.toggle('activo');
      menuMovil2.classList.remove('activo');
      function btnMovil2(){
      menuMovil1.classList.remove('activo');
      menuMovil2.classList.toggle('activo');
      Saludos

  • @keiberrodriguez5075
    @keiberrodriguez5075 2 года назад

    Edu, me ha saltado una duda, recuerdo que cuando comenzaba con Vscode, los cambios en la ventana del navegador se veían así de fluidos, cómo puedo hacer para que eso pase de nuevo ? 😬

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

    profesor porque no utiliza un gap en el ul y listo sin colocar margin

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

    Te dejo un like y me suscribo, lástima no incluiste un click fuera del menú para que se repliegue este mismo, así quedaría redondito

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

    bro tengo un problema es que al momento de recargar la pagina en el celular se abre automaticamente el menu que puedo hacer

  • @jeremiasbentancor7154
    @jeremiasbentancor7154 2 года назад +1

    Muy buen video, tenes en tu canal un video de cómo hacer una página responsive?

    • @EduardoFierroPro
      @EduardoFierroPro  2 года назад +1

      Pues mira aquí tienes un vídeo sobre 3 hablando sobre el tema y viendo código en Responsive 😊👉 ruclips.net/video/qzyW_Zf0bbk/видео.html
      Por otro lado puedes ver cómo lo aplico en proyectos como estos:
      ✓ Programando DC Shoes USA ruclips.net/video/nUu--X0mmlo/видео.html
      ✓ Programando un Portfolio ruclips.net/video/XAwXz2w3vlg/видео.html
      ✓ Programando Google Stadia ruclips.net/video/LtyWVeFE4uM/видео.html
      ✓ Programando Netflix ruclips.net/video/WCUASu4V258/видео.html
      ✓ Programando Instagram con Yoda ruclips.net/video/JWV2rgTnbFQ/видео.html
      ¡Espero que te resulte de utilidad este comentario!😊

    • @jeremiasbentancor7154
      @jeremiasbentancor7154 2 года назад

      @@EduardoFierroPro muchas gracias !!!

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

    Buenas maestro, mil gracias! muy bien explicado y un resultado genial. Tras muchos intentos de hacer una versión mas personal agregando un submenu sigo sin poder hacerlo. Podrías explicar así rápidamente como poder hacer menu con submenu? :) thanks!! {} :)

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

    tu clase muy interesante super didactico , pero mi distraigo un poco por lo guapo que eres . :)

  • @joan4440
    @joan4440 2 года назад

    Y como hacer el mismo menú para escritorio, porque muchas páginas también usan el mismo estilo, osea que no desaparezca el botón hamburguesa.

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

    Hola Eduardo!! sabes como solucionar el problema de que al momento de desplegar la navegación hacia abajo, el contenido de la página no se mueva hacia abajo???
    Amo tus videos, son tan detallados que no se te escapa nada!!!

  • @SalmonAhumado
    @SalmonAhumado 2 года назад +1

    No sé porqué el firefox y el chrome algunas cosas de reset Pro me las implementan bien y otras, como el transform, o el modo oscuro no. Revisé todo el código varias veces, la sintaxis, además el reset lo descargué de su guithub y lo revisé a la vez que veía su vídeo. Lo tomaré de referencia pero quitaré lo que me de problemas hasta que vea otra solución

    • @EduardoFierroPro
      @EduardoFierroPro  2 года назад +1

      Bien hecho Sefora!! Como bien comento en el vídeo teórico de Reset, es una base y debemos de modificarlo y adaptarlo en base a nuestro proyecto como comento aquí 😊👉 ruclips.net/video/bXqPNoYFK8w/видео.html ¡Te agradecería que me comentases si se resuelve el día de mañana! Un saludo!

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

    jq no es obsoleto es decir ya deberia ser js en todo

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

    veo que sabes mucho, cuál es tu salario xD ? No che, pará, pregunto en serio, para motivarme aún más para seguir jajaja