CREA un MENÚ ANIMADO con CSS RESPONSIVE [ ❌ Sin JavaScript ]
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- 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...
Aprende CSS como NADIE 👉 alexcgdesign.com/cursocss
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
Es súper didáctico, pero no le tengan miedo a js, con 5 líneas de código sale esto, sin enrredos.
@Byron Loarte si, claro, mira github.com/bsquiroz/menu_nav, cualquier duda me escribes.
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.
@@stivenquiroz6904 acabo de basarme en tu código para hacer el de mi página, me sirvió mucho, gracias!
Excelente video men una sugerencia, deja un archivo de ejemplo, ayudaría mucho una base para trabajar.
Un cordial saludo
Como decimos en República Dominicana, eres el mejor jajajaj un abrazo de este lado.
Como hago que desaparesca al dar click?
Esto es genial creo pondre la meta de ver un tutorial a la semana creo que aprendere un montón
hermanos, sos grande excelente contenido y explicación Sensey saludos desde El Salvador
Amigoooo muchas gracias, estaba buscando un nav simple, peo el tuyo es epico tienes mi merecida sub tqm
Gracias! tu manera de explicar me ayudo a entender como funciona
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.
pudiste averiguar cómo se hace?
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
Encontraste alguna solución?
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.
pues como hacer que eso funcione en el navegador edge? ya que no me funcionan lo efectos...
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 :(
lamentablemente hice todo exacto.. pero le doy click y no se me ativa quedo nuevamente con el error del clip-path
estupendo el tutorial, pero me gastaría saber como poner otro input que al dar clic en una de los items cierre el menu
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
estoy en la misma y no responde ningún comentario este muchacho...
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
Excelente, algo que quería aprender. Aunque podrías sacar también la versión con javascript
Hola Jonathan, claro. Sin ningún problema
@@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
@@marcoantoniovalencia8694exacto amigo eso estoy tratando de solucionar pero no puedo, si tu ya lo hiciste ayúdame por favor
@@jusittoledobernal4170 no pude solucionarlo, pero seguí otro tutorial que si lo hacía y me quedé con ese
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
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
Excelente video! muy buena explicación y muy buenos los efectos! Muchas gracias por compartir!👍
Me encata el estilo de como queda saludos.
Grande Ale te sigo en todos los videos sos muy práctico para explicar gracias
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?
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
Wow!! te pasaste viejo! está buenísimo
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
tengo un problema no me aparece la imagen del menu( osea el icono con 3 barritas ) pero si el checkbox
Excelente explicación hermano, muchas gracias!
una pregunta ese archivo assets o que extension porque tiene otro icono
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?
Buen video. Fácil de entender y aplicar!!!!
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.
¡Buenísimo!
¿Qué tan recomendable será esta práctica en comparación de hacerlo con js?
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:)
@@AlexCGDesign ¡Pura vida Alex!
La están rompiendo!
Está genial, ¡Graciaaas! :))
Excelente video, me ayudaste mucho
excelente tutorial , muchas gracias
Hola buenas, no me abre el menú hamburguesa... Qué debo hacer?
Saludos!
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.
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 😊
gracias amigo, lo pude adaptar a react, en un componente
Que cool!!
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
Amigo, debieras poner el código y compartir lo que sabes. Yo te compartiría mis conocimientos, pero no te conviene. *Soy Proctologo.*
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
Oogway: Yo no sé.jpg XD
Lo recomendable es trabajar con mobile first.
Muy buen video explicas re bien, un saludo
Gracias, saludos!
Cómo hago para que se cierre el menú cuando le doy clic a un enlace? Estoy haciendo una one page y los enlaces dirigen a la misma página con un #.
pudiste averiguar?
AMIGO, MUCHÍSIMAS GRACIAS
que extensión usas para que se vean los iconos de htmls5 y css?
Holaa, se llama VSCODE ICONS:)))
@@AlexCGDesign graciaaaas!!
tu voz me recuerda a Lalo garza "krilin"
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 ???????
Usa un formateador de código, cómo prettier
@@josergz osea no hay una combinacion de teclas como el ALT+F en el HTML ???
@@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
José, gracias por el apoyo:)
Un saludo a ambos
@@AlexCGDesign dsculpa crack mi crack
Gracias alex
Me compre tu curso de udemy bro todo chido
Genial Augusto, cual es el tema que más te ha gustado hasta ahora?
@@AlexCGDesign siento que voy a batallar cuando entre a display grid pero sera todo un reto jajajajaja
@@pugliesseaugusto8114 verás que no, que será muy fácil:))
@@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
Podrías sacar otro vídeo creando una página web ? Porfavor
Claro Anthony!
Paso tanto tiempo que no entiendo nada