DESARROLLA un botón de MENÚ con animación con sólo HTML y CSS. ¡Sin imágenes!

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

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

50% 1

Es super fácil de hacer. Sólo tienes que crear un botón y dentro 3 divs vacíos. Cada div es uno de los palitos del menú.
Luego al hacer hover animamos los tres palitos. Dos los rotamos y el del medio lo hacemos desaparecer.
¡Queda genial y es muy fácil!
¿Te animas a hacerlo?
#shorts

Наука

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

8 окт 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@longebor85 Год назад

Muy chulo! Faltó el cursor pointer para los que nos da toc el puntero

@janettita5390 Год назад

No te pases, es el tuto más sencillo que he visto para este efecto... 👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻... El crack

@santidionis5020 Год назад

Gracias por el trabajo genial animacion

@midudev Год назад

Gracias, Santi!

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

@@midudevestaria genial q dejaras el codigo en los comentarios para estudiarlo

@therrymiranda454 Год назад

Grande Midu! Please cuando haces un vídeo así sea corto sobre Cloudfare Workers.

@ThebullNot 15 дней назад

Midu eres genial 🎉

@raqueliglesias_0 Год назад

Que buena capacidad de sintesis

@midudev Год назад

Gracias, Raquel! Cuesta bastante jajaja

@henryazogue9657 Год назад

gracias midu, me encanto y lo estoy usando

@mauriciohenaorua1227 Год назад

Muchas gracias por El contenido siempre El mejor!

@xavier.xiques Год назад

Muy bueno, crack!

@carlos.sanchez.arg.1976 Месяц назад

GRacias!!!!! que bueno!!! abrazo

@SonGoku-pc7jl Год назад

que xulo, gracias Midu :)

@MrAndrewRod Год назад

Excelente 👍👍👍

@anthonyd.7686 Год назад

Geniaaal

@lacuevadelinsecto Год назад

Ídolo!

@kalinux8572 Год назад

Buen contenido

@felixurrutia4246 Год назад

Que cool 😎

@os.junior8534 Год назад

No habría problemas de accesibilidad por usar un buton para definir un nav menú? Fuera de contexto ehh que la animación te ha quedado chulisima 😃

@leonardolezcano7070 Год назад

thanks i needed

@OtroMundoChronicles Год назад

Chale el segundo hijo... Por inexistente xd

@josuedev2440 Год назад

Gracias midu

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

asi lo hice yo, en lugar de solo usar el rotate le puse tambien un translate: transform: translate(0,12px) rotate(45deg);

@jonatanleonelsanchezvelazq764 Год назад

Hola, ¿tenders algun curso sobre desarrollo web?.

@angelbv8391 Год назад

💪💪

@sandradegarcia6282 Год назад

Maravilloso💙

@unargentinoquepiensa7428 Год назад

no se me forma la x

@jorgeduran4312 Год назад

Buenaa

@lidwinguillermogascagarcia439 Год назад

Escuche que no es bueno usar div para todo, pero soy nuevo, es verdad?

@paularodriguez7551 3 месяца назад

A mi no me sale

@themadplayer4955 Год назад

Amigo es necesario memorizar cada unos de los códigos a detalle?

@ElPapu77746 Год назад

La verdad no, más bien debes familiarizarte con el código para que puedas hacer tus propias animaciones

@simplework9559 Год назад

No, mas bien tendrias que entender el porque pone eso en cada linea y disecciónar cada linea, por ejemplo cuando dice "display: flex" flex es una forma de ordenar los elementos dentro del elemento padre, pero vos tranquilamente podrias usar un "display: grid" que es otra forma de ordenar los elementos.

@tigreonice2339 Год назад

¿Alguna manera para que no sean lineas ni x, sino que diga MENÚ? Me gusta más así para las personas que están entrando a usar internet

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

Mejor ponle ( menú AQUÍ)

@axelledesma1696 9 месяцев назад

Hola, tengo un problema. No se alinean correctamente, es decir están asimétricos los dos divs al convertirse en una X. Lo hice tal como lo hace en el video.

@JeremyPeralta-yc4sr 9 месяцев назад

me pasa lo mismo

@bethania.aquino 8 дней назад

me paso algo similar pero me equivoque en un par de cosas, así que meti el código en chat gpt, le explique lo que intentaba hacer y me dio los errores, te sugiero hagas lo mismo

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

Hola una pregunta es difícil aprender programación web, sobre todo JavaScript?

@Aesthetic-gracefully Месяц назад

Si, pero si desde pequeño te intereso la programación y pudiste hacer algún pequeño programa en el sistema computacional de scratch ( programación visual computacional POO orientada a Linux) si será un poco fácil (más difícil que fácil), además si quieres aprender toda la programación web te tomara 3 años por lo menos, mínimo estudiando muchas hrs al día, aproximadamente Ya llevo 2 años y medio estudiando esto y ya para 2024 salieron más de 10 nuevas tecnologías dedicado al desarrollo web las cuales se tienen que aprender.

@8DMusicRD Год назад

bro sube un video clonando youtube

@rolandojtorres Год назад

Muchas líneas de codigo sepuede hacer en svg con 3 líneas de codigo.

@jeisongarzon6066 Год назад

Podrías compartir como es en svg? :O

@gamuro6977 Год назад

no sé pueden mover las líneas del svg o si?

@sodio777 Год назад

soy el único al que le empiezan a girar por la izquierda y se queda descuadrada?

@stivenquiroz6904 Год назад

Si lo haces con esas medidas, no, pero si lo haces con diferentes medidas, claro que si.

@MrQJose Год назад

@@stivenquiroz6904 a mí me pasa lo mismo, lo lograste solucionar?

@stivenquiroz6904 Год назад

@@MrQJose Dandole diferentes medidas, juega con ellas.

@XxXjujio2013XxX Год назад

¿Y para que no pase lo de la animación, sino que para que pase de 3 palitos a X ("cruz") de una?

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

creo que le tenés que quitar el atributo transition, el cual determina el tiempo que se tarda la animación

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

Le falta código a eso😢😢

@laupez Год назад

Y cómo se hace para engrosar los palitos ósea darles más relleno?

@bethania.aquino 8 дней назад

en (button > div) , les debes poner más height

@jonathanrangel5914 Год назад

genial, existe algo para que sea con un click?, al hacer click se forma la "X" y al hacer click nuevamente se haga el menú

@longebor85 Год назад

Con JS usas el evento onclick y le aplicas una clase que haga la animación

@agustingonzalez7641 Год назад

@@longebor85 no hace falta, hay un truco con el input checkbox

@gamuro6977 Год назад

con checkbox o con Javascript se puede

@kanonkn Год назад

Ahora hazlo accesible sino no sirve para nsds

@mipisha Год назад

Siento decir que ese HTML no es semánticamente correcto. Un botón no puede contener un div como hijo 😢

@midudev Год назад

Pues tienes razón que no se puede usar div dentro de un botón. Pero sí se podría usar un span y el resultado sería el mismo. :) Vamos, que tiene solución.