Como hacer un menú responsive con CSS

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

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

  • @dcjara
    @dcjara 2 года назад +8

    Felicitaciones por este video. No había encontrado una explicación en youtube que me dejara tan satisfecho, de inmediato a mis favoritos.

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

    Excelente forma de explicarlo y sin enriedos, a la velocidad ideal para poder aprender. Muchas gracias por tu aporte hasta ahora es el mejor video que me ha hecho entender el responsive

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

    Literalmente el mejor video explicado en lengua hispana sobre como hacer un menú responsive. Un genio!

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

    Graciasss, me has salvado, no había comprendido aún como hacer el responsive y contigo al final lo entendí y pude hacerlo 🤍

  • @leonarzb5705
    @leonarzb5705 2 года назад +11

    Genial. Eres muy bueno no sólo técnicamente sino además explicando. Excelente profesor. Gracias por brindarnos tus conocimientos

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

    Muchas gracias, lo logré, quedó perfecto.

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

    Buena guía, gracias por compartir, una pregunta, si le añado un submenu a alguno de los , cual seria la forma mas óptima de mostrar y ocultar ese submenu en el modo movil?.

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

      Exactamente igual, dejas el submenú oculto, y al hacer click en el menú despliegas el submenú. Un saludo!

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

    Increible, muchas gracias por aportar tanto valor y de forma gratuita. Excelente tutorial y profesor

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

    Excelente vídeo, muy claro y como siempre sumando trucos

  • @destradar1
    @destradar1 2 месяца назад

    Hola gracias por compartir. Por qué cuando coloco el input como hermano de main-menu a mi no me funciona. estoy haciendo todo lo que tú haces. Lo que a mi página le ocurre es que la barra de menú se baja un poco más en modo escritorio y en modo móvil, ya el icono de menu ya no es clickeable. Por qué será?. Gracias

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

    Muchas gracias, Amigo. Tu video fue de gran ayuda. Saludos.

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

    Felicidades de nuevo, buen trabajo

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

    Como siempre el mejor de todos... Había visto varios vídeos pero no me cerraban..!! Gracias Dorian ❤😊

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

    gracias buen hombre por compartir tu conocimiento, toma tu terrible like

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

    te amo sos un capo gracias por tanto

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

    Help! Alguien sabe como hizo el profe para poner => EN ESTE LUGAR ('click'() => Porque no funciona con el signo igual = y mayor que >. Tengo que armar i primer proyecto.GRACIAS

  • @julianap.5183
    @julianap.5183 Год назад

    GRACIAS! Justo estoy aprendiendo Html y CSS sin JavaScript y me re sirvio!

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

    Nos ha gustado y creemos que es útil!

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

    Excelente video! Busque por todos lados como hacer un menú así y no encontré ninguno tan bueno y claro como este. Gracias milesss

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

    alguien sabe como se programa(Buenas practicas) para cuando demos clic en cada ítem se oculte el menu?

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

    Cuanto eché de menos un video tuyo Dorian, un saludo maquina!!!😃😃

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

    Gracias, muy bueno para los q andamos iniciando.

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

    👏👏👏👏👏👏👏 Muy bueno!

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

    Excelente vídeo hermano. Súper bien explicado, muchas gracias por el aporte!

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

    Que buen vídeo!!, muchas gracias por compartir

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

    Gracias genio exitos en tu vida saludos desde Argentina

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

    Hola crack.. q piensas de aprender a probar a los50.. con respecto al mundo laboral..gracias..

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

    Hola Dorian, acabo de ver tu video y de momento solo quiero saber como hacer para que en la versión móvil, inicie sólo con el botón de hamburguesa y no el menú ya desplegado. Muchas gracias. Saludos.

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

    al poner en img el max-width 100% el menu se ve muy grande, tengo que ponerlo en 1.5% para que se vea pequeño
    luego el menú queda fuera del color y texto, no se mete dentro del color

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

    Muy buen tutorial. Gracias.

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

    ❤gracias por el tutorial ya pude mejorar mi portafolio

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

    Al hacer scroll hacia arriba no se ve el menú?

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

    Hola. Excelente tutorial.
    Cuando se aplica el procedimiento para que funcione sin java scritp, se pierde el cursor Pointer. Que se puede hacer en ese caso?

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

    La verdad mejor explicado imposible! Excelente video! Gracias, me re sirvio 🙌👌

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

    alguien sabe como puedo evitar el "pestaneo" que hace el menú al volver la ventana a tamaño menor a 768px??

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

    Dicho esto! , solo queda decir Gracias @DorianDesings

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

    Excelente Video!!!

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

    A LU CI NO!!!!!! lo necesitaba para una práctica que estoy haciendo pero con esto la mejoro 100x100

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

    muy buen videooo! muchisimas gracias, estoy aprendiendo y me habia trabado un poco con el tema del menu responsive, con este video lo entendí muy bien la verdad. Gracias un saludo! nuevo sub :)

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

    Perfectamente explicado!

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

    Saludos desde Cali Colombia

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

    Gracias por el vídeo. Saludos 👍🏼

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

    excelente video, muchisimas gracias!

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

    Muy Agradecido Excelente video

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

    Muy util. Gracias amigo! Saludos

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

    No funciona me da error de unexpected 'click' no es un elemento

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

    Genial. No se pueden explicar las cosas mejor. Haces que parezca todo fácil. Por cierto aunque sea otro tema ¿qué es mejor o qué diferencia hay entre linkear una font en el HTML o hacer un @import de esa font en el CSS...? y es mejor hacer un CDN o ejecutar en local?
    por el performance... Gracias por todo... te deseo lo mejor.

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

    Excelente video, ayuda un montón a poner a trabajar el cerebro, aunque en la vida real, es solo JS.. sigue asi con excelente contenido Bro... Saludos...

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

    Perfecto como siempre 👌👌

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

    No es acaso una mala práctica tener el @media después de cada cosa que escribas en mobile first? No sería mejor, tener al final del todo, las medias necesarias, o incluso 1 media para tablet y 1 media para pc? Después de todo en la misma que tenías ya podías agregar el .toggle-menu {display:none;}
    La pregunta no es a modo de criticar, es realmente porque estoy aprendiendo desarrollo web y así me enseñaron que era la mejor práctica. ¿Existe algún motivo por el cual poner y repetir las @medias?

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

    Estoy intentando usarlo con el JS y no sirve porque el menu en mobile ocupa espacio estando plegado por lo tanto me descuadra el header bastante fail.

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

    wow, genial!!!

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

    Muchas gracias me ayudaste demaciado, solo que hay 1 cosa que no entiendo (soy nuevo en esto, estoy aprendiendo) en el minuto 6:46, cuando escribes lo de java, te salen unas opciones con una llave, y otro simbolito, por lo que veo usas una de esas, pero en mi vscode no me salen, solo las de los rectángulos, como puedo activarlas?

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

      se llama funcion flecha, es un muy buen tema de javaScript. Te lo recomiedo

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

    Buenas alguien sabe si existe una solución para eso que pasa cuando cambias a vista mobil que el menu de repente aparece abajo y sube rápido?
    Muchas gracias por el video Dorian, muy bien explicado todo.

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

      Buenas, no hace falta una solución para eso, ten en cuenta que un sitio web no se redimensiona habitualmente, nosotros lo hacemos para probar, pero eso no se hace fuera del desarrollo, al menos no de forma habitual, por lo que no es un problema 😊. Un saludo!

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

      @@DorianDesings pero hay paginas que tienen el mismo menu y al redimensionarla no se ve eso 🤔

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

    dorian lo que me pasa aunque lo haga con js es que el menu al pasar de desktop a movil hace un tipo de animacion fea ocultando el navbar, intente de todas las manera quitarlo sin perder la animacion de cerrar y abrir y no puedo, la unica manera que pude fue quitando la animacion al cerrar :c

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

      Estamos en la misma , intente darle menos milisegundos a la animacion e igual se sigur viendo eso , no se que hacer 😅

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

    Gracias eres un crack

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

    Como hago la flechita morada

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

      No sé de qué flecha hablas 😢

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

      símbolo = y > para la función anónima del js

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

    Genial video! Entonces lo más recomendable para hacer un menú responsive es con Javascript?

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

    👏👏👏

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

    er primero!

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

    ¿Por qué dices "en qué situaciones puedes utilizares menú solo con CSS.....RP. Prácticamente en ningún sitio" .... wtf... y para que lo haces entonces? Yo pensaba aplicarlo en mi web. Me mataste el día macho!

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

    muchas gracias, rey!! muy buen contenido