Como hacer un menú responsive con CSS

Curso CSS INTERMEDIO 👇
cursos.doriand...
Página del reto
cssbattle.dev/
Código en Github: 👇
github.com/Dor...
👇Si quieres aprender un poco más y pasar un rato conmigo pásate por mi Twitch y saludame 👇
TWITCH / doriandesings
Comunidad de Discord 👇
/ discord
Apoya el canal donando por paypal. 👇
www.paypal.me/...
VENTAJAS EXCLUSIVAS!! 👇
/ doriandesings
Mi setup: 👇
www.amazon.es/...
Mis redes sociales: 👇
🖼️ Instagram - / dorian_desings
💬 Facebook - / yoaprendocondorian
🐦Twitter - / doriandesings📋

[@yamilaholik]

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

[@dcjara]

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

[@felixcarreno5101]

Muchas Gracias. Fue un gran vídeo. La explicación concreta y siempre dando argumentos para complementar y orientar. Éxitos.

[@aldorsan]

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

[@DorianDesings]

Muchísimas gracias!!

[@vickymora04]

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

[@leonarzb5705]

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

[@DorianDesings]

Muchísimas gracias!!

[@carolinacuello7780]

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

[@shyrowo]

te amo sos un capo gracias por tanto

[@DorianDesings]

Muchísimas gracias!!

[@jlopekkos2164]

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

[@nicoux9581]

👏👏👏👏👏👏👏 Muy bueno!

[@DorianDesings]

Muchísimas gracias!!

[@trapo3575]

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

[@DorianDesings]

Muchísimas gracias!!

[@nahu8499]

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

[@isolanz2800]

Felicidades de nuevo, buen trabajo

[@danielarapaseje6412]

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

[@catalinalasso9944]

Muchas gracias, lo logré, quedó perfecto.

[@dagcomunica5921]

Saludos desde Cali Colombia

[@studioschris8233]

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

[@leost2097]

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]

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

[@Dolce_Nyx]

Excelente Video!!!

[@DorianDesings]

Muchísimas gracias!!

[@davidcesarquinterossarmien2701]

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

[@dieguitto3528]

Nos ha gustado y creemos que es útil!

[@DorianDesings]

Pues a compartir 😊

[@agustinafernandez9880]

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

[@destradar1]

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

[@lucianodeniro6475]

Gracias genio exitos en tu vida saludos desde Argentina

[@lauttarosanchez3811]

Muy buen tutorial. Gracias.

[@lavozpopularca]

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

[@marketinginhouse]

Gracias, muy bueno para los q andamos iniciando.

[@devgus2247]

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

[@maruchoo]

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 :)

[@LuisAngelPonceAlvarez]

❤gracias por el tutorial ya pude mejorar mi portafolio

[@andrespodadera5874]

Gracias por el vídeo. Saludos 👍🏼

[@DorianDesings]

Gracias a ti! 😊

[@salletob]

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]

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

[@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.

[@joselu___1746]

er primero!

[@EmiCiappi]

wow, genial!!!

[@yerryvmc]

Dicho esto! , solo queda decir Gracias @DorianDesings

[@DorianDesings]

Gracias a ti por comentar y verlo!

[@jorgeleonardogamarraospino9896]

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

[@blancacortes8659]

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

[@mati14455]

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

[@maxigarrett3121]

Perfecto como siempre 👌👌

[@DorianDesings]

Muchísimas gracias!!

[@pedrocanamerogonzalez3248]

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

[@Vivayu]

Perfectamente explicado!

[@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?

[@CAFernandezB]

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

[@DorianDesings]

Muchísimas gracias!!

[@carloselhaker]

@@DorianDesings yo tengo el mismo problema

[@hbj1991]

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

[@nolascomedina9545]

excelente video, muchisimas gracias!

[@angeljavierlugo]

Muy Agradecido Excelente video

[@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?

[@ProfesorMan]

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

[@carlosmaximoarraigada307]

Muy util. Gracias amigo! Saludos

[@DAVIDIL81]

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.

[@silvpe9653]

👏👏👏

[@sebamartinez6725]

Gracias eres un crack

[@DorianDesings]

Muchísimas gracias!!

[@ema_devolder]

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

[@revy_d_vice7652]

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.

[@luisenriquecaleroanchelia6369]

Cómo?

[@kamilo97yo05]

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]

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]

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

[@LesterIvn]

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]

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

[@alexrodriguez7596]

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]

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

[@leonelmartinez2054]

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

[@DorianDesings]

Si, siempre que puedas.

[@carloselhaker]

Como hago la flechita morada

[@DorianDesings]

No sé de qué flecha hablas 😢

[@jorgeluis9400]

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

[@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]

muchas gracias, rey!! muy buen contenido