CREA un MENÚ ANIMADO con CSS RESPONSIVE [ ❌ Sin JavaScript ]

No video

CREA un MENÚ ANIMADO con CSS RESPONSIVE [ ❌ Sin JavaScript ]

Рет қаралды 56,414

Күн бұрын

Descubre COMO CREAR un MENÚ ANIMADO usando SÓLO CSS ✔️ adaptable a dispositivos móviles (RESPONSIVE). ¡ Aprende a hacerlo SIN JAVASCRIPT !
Aprende CSS como NADIE 👉 alexcgdesign.c...
📣 ¿Necesitas un Hosting y Dominio? Utiliza el cupón "ALEXCG" hasta 90% de descuento en Hostinger.com.
ENTRA AQUÍ 👉 www.hostinger....
-----------------------------------------------------------------------------------------------------------------------------
Sigue aprendiendo CSS:
💥 Lista de reproducción CSS: • 💻 CURSO CSS GRID LAYOU...
-----------------------------------------------------------------------------------------------------------------------------
CURSOS COMPLETOS:
📘CURSO CSS3 COMPLETO (Descuento) 👉 alexcgdesign.c...
👨‍💻🎁 Diseño Web Desde Cero (Descuento) 👉 alexcgdesign.c...
-----------------------------------------------------------------------------------------------------------------------------
✉️ Redes sociales:
Blog de desarrollo web: www.alexcgdesi...
Facebook: goo.gl/7o77tx
Linkedin: goo.gl/byCJnS
Github: github.com/Ale...

Пікірлер: 85

@AlexCGDesign 3 жыл бұрын

Aprende CSS como NADIE 👉 alexcgdesign.com/cursocss

@omaralejandroibanez83 3 жыл бұрын

Me encantooo. Hace poco comence a estudiar y estoy terminando css, aun no arranco con js y tenia tremendas ganas de hacer un menu como este. Me vino genial

@stivenquiroz6904 3 жыл бұрын

Es súper didáctico, pero no le tengan miedo a js, con 5 líneas de código sale esto, sin enrredos.

@stivenquiroz6904 3 жыл бұрын

@Byron Loarte si, claro, mira github.com/bsquiroz/menu_nav, cualquier duda me escribes.

@salvadorsarabiaorea105 2 жыл бұрын

No es miedo, es que, al menos para los que venimos de C++ o C# es altamente desesperante que JS no marque errores (bueno, algunos de ellos) sino hasta tiempo de ejecución, tampoco me gusta el tipado automático, prefiero ser muy explícito en cuanto al tipo de datos así que, aunque lo uso (suelo usar ASP:NET y C#) prefiero omitir JS en lo posible.

@isturizz 2 жыл бұрын

@@stivenquiroz6904 acabo de basarme en tu código para hacer el de mi página, me sirvió mucho, gracias!

@JMAnguiano 3 жыл бұрын

Excelente video men una sugerencia, deja un archivo de ejemplo, ayudaría mucho una base para trabajar. Un cordial saludo

@blackbooxx6564 3 жыл бұрын

Como decimos en República Dominicana, eres el mejor jajajaj un abrazo de este lado.

@josuereyes6948 2 жыл бұрын

hermanos, sos grande excelente contenido y explicación Sensey saludos desde El Salvador

@lihuelcardozo6497 11 ай бұрын

Gracias! tu manera de explicar me ayudo a entender como funciona

@cruzsanchezmiguelangel5733 Жыл бұрын

Amigoooo muchas gracias, estaba buscando un nav simple, peo el tuyo es epico tienes mi merecida sub tqm

@javiermoragil8424 3 жыл бұрын

Esto es genial creo pondre la meta de ver un tutorial a la semana creo que aprendere un montón

@SpaceCowboyMdq92 3 жыл бұрын

3er video tuyo que miro, ya me suscribí y tengo las notificaciones. Un genio como explicas! Podrias hacer un tutorial sobre indispensables y necesarios de JS para paginas web? Su utilizacion y utilidad. Seria el video mas visto por programadores jr :P

@dainodaiboken5728 Жыл бұрын

Hola, muy buena explicación, me agrado mucho el vídeo, me gustaría saber cómo poder ocultar el contenido de la página al momento de desplegar el menú ya que se muestra la información que hay en la página, saludos.

@marcoantoniovalencia8694 Жыл бұрын

pudiste averiguar cómo se hace?

@jonathanvarongomez8475 3 жыл бұрын

Excelente, algo que quería aprender. Aunque podrías sacar también la versión con javascript

@AlexCGDesign 3 жыл бұрын

Hola Jonathan, claro. Sin ningún problema

@marcoantoniovalencia8694 Жыл бұрын

@@AlexCGDesign faltó algo muy importante, cuando se haga clic en alguno de los enlaces el menú debe cerrarse y dirigirse a la sección seleccionada, pero buen vídeo de todos modos

@jusittoledobernal4170 Жыл бұрын

@@marcoantoniovalencia8694exacto amigo eso estoy tratando de solucionar pero no puedo, si tu ya lo hiciste ayúdame por favor

@marcoantoniovalencia8694 Жыл бұрын

@@jusittoledobernal4170 no pude solucionarlo, pero seguí otro tutorial que si lo hacía y me quedé con ese

@luisaugsburger 2 жыл бұрын

Excelente video! muy buena explicación y muy buenos los efectos! Muchas gracias por compartir!👍

@nahuelquevedo7203 2 жыл бұрын

Me encata el estilo de como queda saludos.

@santtti7 Жыл бұрын

Excelente explicación hermano, muchas gracias!

@miguelnutriser 3 жыл бұрын

Grande Ale te sigo en todos los videos sos muy práctico para explicar gracias

@mrdominguez 3 жыл бұрын

Wow!! te pasaste viejo! está buenísimo

@tomdvazq7054 2 жыл бұрын

Buenas! tengo una duda. Yo arriba de mi navbar tengo un header de bienvenida, mi nav está configurado con position sticky y todo el proceso funciona bien. El problema es que cuando a lo que usted seleccionó como 'nav-menu' le doy la position fixed, se ve bien pero si subo o bajo sube conmigo, yo quiero que se quede estático debajo del menú del navbar

@josegregoriotebrestamoy9148 Жыл бұрын

añade z index:100 despues de la position: fixe esas dos propiedades va hacer lo que quieres lo unico es que tienes que agregar width:100% para te ocupe toda la pagina

@emanuelchinchilla3193 2 жыл бұрын

muy buen tutorial, solo tengo una duda, cuando le doy clip a inicio, o a alguno de los enlaces dentro del menú, el menú no desaparece se queda fijo, hasta que presione el icono del menú de nuevo. Estoy buscando una forma en la que la salida del menú sea tanto el enlace como el icono sin tener que usar JS, pero no se me ocurre aun algo .... si alguien tiene una pista se lo agradecería

@Johanp_77 Жыл бұрын

Encontraste alguna solución?

@pablobarrios8585 2 жыл бұрын

Buen video. Fácil de entender y aplicar!!!!

@jhosianlopez5019 2 жыл бұрын

Como hago que desaparesca al dar click?

@fedetrani Жыл бұрын

No sé por qué en el minuto 16:46 llegué bastante bien, pero al poner el clip path 100 at center, no me funciona el check box. Está todo en el html escrito igual que lo has hecho vos, y en el css tmb

@playfastordie8528 9 ай бұрын

estoy en la misma y no responde ningún comentario este muchacho...

@danielbn5268 Жыл бұрын

Hola muy muy buen video, es una solución muy ingeniosa que a casi ninguno se le hubiera ocurrido, Este video me ha venido de perla ya que estoy haciendo una aplicación con PHP y necesito un menú desplegable para que sea responsive, y si bien podría usar Javascript , realmente no me sirve porque partes de el html están dentro de bloques de lógica y me da el error: El script de “x” fue cargado a pesar de que su tipo MIME (“text/html”) no es un tipo MIME válido de JavaScript.

@brayangarzon7732 Жыл бұрын

estupendo el tutorial, pero me gastaría saber como poner otro input que al dar clic en una de los items cierre el menu

@emilceespinoza6892 3 жыл бұрын

pues como hacer que eso funcione en el navegador edge? ya que no me funcionan lo efectos...

@adolfojosegelabert 10 ай бұрын

lamentablemente hice todo exacto.. pero le doy click y no se me ativa quedo nuevamente con el error del clip-path

@david1970qdr 2 жыл бұрын

Hola. Enhorabuena por el tutorial. Se puede con CSS que cuando se hace click una opción del menú en la media query, se escondan las opciones del menú como si hubiéramos dado en el icono del menú que lo abre y lo cierra?

@gabrielaotero1017 2 жыл бұрын

Está genial, ¡Graciaaas! :))

@favs01 2 жыл бұрын

Todo bien con el menú, muchas felicidades, me encantó. Solo una duda, al ver mi menú, como que se desplaza un poco hacia abajo, ya que no se logra visualizar todas las opciones del mismo. Me pasa principalmente cuando veo la página en el celular y pantallas pequeñas. De hecho, se desprende de la barra superior. Me podrías orientar?? De antemano gracias

@manueltyt7397 2 жыл бұрын

Man cuando pongo Gap y esas tres líneas no me agarra osea pongo el inspecccionador y sale que nombre o comando Uknow sabrás porque? Igual con el --clippy ese comanp no sale pq? Ayuda Bro :(

@danielalejandrohernandezga9292 2 жыл бұрын

Excelente video, me ayudaste mucho

@apuntesnavarrete9583 3 жыл бұрын

excelente tutorial , muchas gracias

@juanochando7146 2 жыл бұрын

gracias amigo, lo pude adaptar a react, en un componente

@AlexCGDesign 2 жыл бұрын

Que cool!!

@emmanuelovares 3 жыл бұрын

¡Buenísimo! ¿Qué tan recomendable será esta práctica en comparación de hacerlo con js?

@AlexCGDesign 3 жыл бұрын

Yo recomendaría hacerlo más con JS, solo serian agregar 6 líneas, esto por el tema de compatibilidad, pero estos ejercicios ayudan a reforzar bastante CSS3:)

@emmanuelovares 3 жыл бұрын

@@AlexCGDesign ¡Pura vida Alex! La están rompiendo!

@jhonatanalvarez2587 2 жыл бұрын

Buen dia, Disculpa como funcionaria este menu pero para un UL, mi menu lo tengo en UL y no me reconocer la clase del UL para que se despliegue el menu

@TizianoMontenegro07 2 жыл бұрын

Muy buen video explicas re bien, un saludo

@AlexCGDesign 2 жыл бұрын

Gracias, saludos!

@isaaccortez1645 2 жыл бұрын

Hola buenas, Muchas gracias por el video, podrían ayudarme? he hecho el menu con position fixed y al hacer scroll mi nav se vuelve color blanco y deseo que el icono svg se vuelva color negro podria ayudarme a saber como se hace con css?

@xDjeanpoolxd 2 жыл бұрын

AMIGO, MUCHÍSIMAS GRACIAS

@josegregoriotebrestamoy9148 Жыл бұрын

una pregunta ese archivo assets o que extension porque tiene otro icono

@Rodri369_ 3 жыл бұрын

tengo un problema no me aparece la imagen del menu( osea el icono con 3 barritas ) pero si el checkbox

@mage0966 2 жыл бұрын

Esta muy bien el video pero si tienes elementos abajo estos elementos pueden estorbar y se ve muy feo y no funciona. A mi me llego a pasar pero implemente un script en Javascript como complemento que corrige eso y quedo muy bien.

@garyrodriguez4309 3 жыл бұрын

Tengo entendido que todo lo que se pueda hacer con CSS se haga asi por cuestion de peso y que cargue mas rapido la pag dado que JS tiene mas peso, es tan asi? O en este caso JS lo hace mas simple entonces deberia hacerse asi? Espero que se entienda la preg

@foredroid9904 3 жыл бұрын

Oogway: Yo no sé.jpg XD

@LunaMilagrosSierraSadovnik Жыл бұрын

Hola buenas, no me abre el menú hamburguesa... Qué debo hacer? Saludos!

@gianpietroduccini2203 3 жыл бұрын

seria buenisimo que dejaras una copia del codigo que realizas en cada video para que asi nos sea mas facil el practicarlo!!! saludos desde San Juan Argentina...... si subes el codigo me suscribo y paso tus videos a otros comapñeros

@Joel-kr6ex 8 ай бұрын

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.

@luisenriquecaleroanchelia6369 4 ай бұрын

Para ello debes usar Ids en tus section q deseas ir y para cerrar al dar click en un ítem del menú , debes usar javascript ya q en css no se puede seleccionar ascendentemente 😊

@polodibujanye Ай бұрын

Amigo, debieras poner el código y compartir lo que sabes. Yo te compartiría mis conocimientos, pero no te conviene. *Soy Proctologo.*

@Deus-lo-Vuilt 2 жыл бұрын

Gracias alex

@DirtyJacketArg Жыл бұрын

que extensión usas para que se vean los iconos de htmls5 y css?

@AlexCGDesign Жыл бұрын

Holaa, se llama VSCODE ICONS:)))

@DirtyJacketArg Жыл бұрын

@@AlexCGDesign graciaaaas!!

@pugliesseaugusto8114 3 жыл бұрын

Me compre tu curso de udemy bro todo chido

@AlexCGDesign 3 жыл бұрын

Genial Augusto, cual es el tema que más te ha gustado hasta ahora?

@pugliesseaugusto8114 3 жыл бұрын

@@AlexCGDesign siento que voy a batallar cuando entre a display grid pero sera todo un reto jajajajaja

@AlexCGDesign 3 жыл бұрын

@@pugliesseaugusto8114 verás que no, que será muy fácil:))

@pugliesseaugusto8114 3 жыл бұрын

@@AlexCGDesign así como haces ver fácil algunas funciones de css me encantaría que tuvieras un curso en udemy de full Java script desde 0

@mage0966 2 жыл бұрын

Lo recomendable es trabajar con mobile first.

@waltercg7788 3 жыл бұрын

una consulta asi como ordenar bonito (dar formato) al codigo HTML con control alt +F ...........Como das formato para que se vea bonito el codigo.css ???????

@josergz 3 жыл бұрын

Usa un formateador de código, cómo prettier

@waltercg7788 3 жыл бұрын

@@josergz osea no hay una combinacion de teclas como el ALT+F en el HTML ???

@josergz 3 жыл бұрын

@@waltercg7788 desconozco, pero normalmente se usa un formateador de código, de hecho en el vídeo se ve que el usa prettier , que es de los más populares, se instala como una extensión para visual Studio Code y creo que igual sirve para otros editores de código, chécalo es muy buena herramienta

@AlexCGDesign 3 жыл бұрын

José, gracias por el apoyo:) Un saludo a ambos

@waltercg7788 3 жыл бұрын

@@AlexCGDesign dsculpa crack mi crack