Como hacer un menú responsive con CSS

Подписаться 79 тыс.

Просмотров 37 тыс.

50% 1

Curso CSS INTERMEDIO 👇
cursos.doriandesings.com/
Página del reto
cssbattle.dev/
Código en Github: 👇
github.com/DorianDesings/css-...
👇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/DorianDesings
VENTAJAS EXCLUSIVAS!! 👇
/ doriandesings
Mi setup: 👇
www.amazon.es/shop/doriandesi...
Mis redes sociales: 👇
🖼️ Instagram - / dorian_desings
💬 Facebook - / yoaprendocondorian
🐦Twitter - / doriandesings📋

Наука

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

16 фев 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 83

@yamilaholik 8 дней назад

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

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

@nahu8499 Год назад

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

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

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

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

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

@leonarzb5705 2 года назад

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

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

Muchísimas gracias!!

@devgus2247 Год назад

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

@isolanz2800 Год назад

Felicidades de nuevo, buen trabajo

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

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

@davidcesarquinterossarmien2701 Год назад

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

@agustinafernandez9880 Год назад

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

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

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

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

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

muchas gracias, rey!! muy buen contenido

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

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

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

Gracias, muy bueno para los q andamos iniciando.

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

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

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

Muchísimas gracias!!

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

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

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

excelente video, muchisimas gracias!

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

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

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

Muchísimas gracias!!

@LuisAngelPonceAlvarez Год назад

❤gracias por el tutorial ya pude mejorar mi portafolio

@carlosmaximoarraigada307 Год назад

Muy util. Gracias amigo! Saludos

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

Muy buen tutorial. Gracias.

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

@angeljavierlugo Год назад

Muy Agradecido Excelente video

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

👏👏👏👏👏👏👏 Muy bueno!

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

Muchísimas gracias!!

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

wow, genial!!!

@Vivayu Год назад

Perfectamente explicado!

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

Nos ha gustado y creemos que es útil!

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

Pues a compartir 😊

@danielarapaseje6412 Месяц назад

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

@catalinalasso9944 Год назад

Muchas gracias, lo logré, quedó perfecto.

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

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.

@DAVIDIL81 2 года назад

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.

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

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

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

Gracias por el vídeo. Saludos 👍🏼

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

Gracias a ti! 😊

@Dolce_Nyx 2 года назад

Excelente Video!!!

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

Muchísimas gracias!!

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

Perfecto como siempre 👌👌

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

Muchísimas gracias!!

@lucianodeniro6475 Год назад

Gracias genio exitos en tu vida saludos desde Argentina

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

te amo sos un capo gracias por tanto

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

Muchísimas gracias!!

@leost2097 2 года назад

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

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

@jorgeleonardogamarraospino9896 Год назад

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

@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

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

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

@dagcomunica5921 2 года назад

Saludos desde Cali Colombia

@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

@revy_d_vice7652 2 месяца назад

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.

@matiblv1445 Год назад

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

@yervalmoca 2 года назад

Dicho esto! , solo queda decir Gracias @DorianDesings

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

Gracias a ti por comentar y verlo!

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

Gracias eres un crack

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

Muchísimas gracias!!

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

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

👏👏👏

@CAFernandezB 2 года назад

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

Muchísimas gracias!!

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

@@DorianDesings yo tengo el mismo problema

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

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

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

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

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

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

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

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

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

Si, siempre que puedas.

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

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

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

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

er primero!

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

Como hago la flechita morada

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

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!