The best way to make drop-down menus 👌
HTML-код
- Опубликовано: 19 окт 2024
- Thanks for joining me in this "first" video.
I'll teach you about two new html tags [details] and [summary] which will allow us to create drop-down lists in seconds.
Here is the repository with all the code:
github.com/Leo...
Look at the working example:
leonidasesteba...
Follow me on social networks to find out before anyone else what I'm up to or where I'm eating
/ leonidasesteban
/ leonidasesteban
github.com/leo...
Genial, Leonidas.
Espero subas contenido constantemente, ya que tus clases valen mucho la pena y se aprende demasiado.
Saludos. 😉
No he fallado hasta ahora 🙏
Hola Leónidas, estoy entrando al mundo de la programación y me gusta mucho. Y videos como estos que son tan claros nos ayudan mucho, le felicito por que se nota que dominas el tema. Muchos pueden saber muchas cosas pero pocos como tu pueden enseñarlos. Mil gracias.
Gracias a ti por tus palabras, lo que mencionas es muy cierto. Aquí nos esforzamos por que quede claro 😊
Maestro de lo que realmente importa en el frontend!! Muchas gracias!
Que alegria que te esté gustando el contenido del canal \o/
que curiosa es la vida acabo de terminar un curso de programación y estoy empezando a hacer mis propios proyectos pero o sorpresa me encuentro al mismo profesor en youtube
Gracias profesor Leonidas! Aunque aún no llegamos a esto en clase, ya tengo idea de cómo se hace!
Que alegría verte por acá ❤️ ¡No te rindas!
Dale duro Leo!
Hasta el final
Genial leo, welcome back to RUclips, espero seguir viendo más contenido por acá, ya que además de ser instructivo, es divertido
Todas la semana la sin falta, comparte las clases en la comunidades que seas parte porfa 🙏
hay pero que buenas son tus clases leonidas .
El mejor profesor del mundo, eh tenido el placer de ver sus clases y wow, es un gran placer ahora tenerlo dando cursos en RUclips, para mi este curso piloto es un éxito :-D
Siempre buscando mejorar y entender mejor el ecosistema de la educación
primer video?? si siempre veo tus cursos en Platzi :D
Ana De Canha 😅
Back to the basics :)
Buena bro, vengo de tu curso básico de Html y Css , he usado este pequeño pedazo de Js y está quedando mejor mi web.
Que increíble esto no lo conocía. Sigue subiendo más vídeos así leonidas eres un crack.
Yo tampoco conocía esas etiquetas :)
Genial! Estoy seguro que te va a ir muy bien. Sos un crack.
Semana a semana sin rendirse
Excelente video Leonidas. Estaré atento a los próximos. Muchos éxitos en este nuevo proyecto.
Seguimos en pie!
Muy bueno Leo! Hay que seguir subiendo! 👏🎬👨🏻💻
La Cocina del Código tu también Sacha, sin rendirse. Me inspiras 🤓
Muy bueno! Lo único que me gustaría para las próximas clases es que le bajes un poquito a la música así tu voz se escucha más en primer plano. Gracias por compartir tu conocimiento eres lo máximo
He aprendido de esto 😭
Olo, por fin estoy desempleado y me voy a echar un maraton de tu canal :D
Empezaste por el lado correcto, aquí quedo pendiente de cualquier duda y perdón por los errores de producción poco a poco los voy mejorando 😅
Eres un gran profesor, aunque ya te habías tardado en subir contenido a tu canal jaja...... pero estaré atento siempre suscrito y activada la campanita.
Pero ahora a darle con constancia
Leo eres incredible, por favor sube mas, Crack!
Seguimos subiendo semana a semana
Excelente video y explicación, eres muy genial Leónidas, ya estoy suscrito.
Mil gracias 🙏
Excelente Leonidas, gracias por compartir información tan valiosa.
Gracias a ti por no rendirte y seguir creciendo!
Hola Leonidas, muchas gracias por tus videos, se nota que dominas de lo que hablas y te manejas a nivel maestro sobre lo que enseñas y eso se agradece mucho. Tengo una consulta pero no es sobre el contenido del video, sino mas bien, sobre una consulta técnica ya que note que tienes conectados dos monitores a tu Mac y esa es la consulta, ¿Cómo logras conectar dos monitores mas la pantalla del mismo Mac?, ¿estos monitores funcionan de forma independiente o como uno solo?.
Bueno esa era mi inquietud y nuevamente muchas gracias por tu tiempo y entrega de conocimiento un abrazo desde Chile.
Son independientes, los conecto por dvi pero también podría ser por hdmi
Excelente Leonidas, ya estoy suscrito. Espero con ansias más vídeos. Muchos éxitos!!
Todas las semanas sin falta
¡Muy bueno el video, el contenido y la edición! xD
Espero más contenido de este canal ansiosamente :D
Saludos Esteban desde Venezuela :)
Franyer Rangel ya le tomaré más práctica y técnica y mejorar cada clase.
Genial Leo Saludos desde Arequipa, eres mi mentor en esta área, y que sigan los suscriptores!!
Esooo! Comparte las clases en todos los grupos que estes
Excelente clase Leo. Éxito! Seguimos al pendiente ^^
Gracias Marta, espero te gusten las clases
Hola, sigue así me gustó el vídeo me subscribo
Sí, estuvo muy bueno el video :D
Sos un gran profesor, te sigo desde platzi
Muy cierto José ¡Leonidas es un gran profesor! :)
Eso es Leonidas, esperando muchos contenidos de calidad de tu parte, saludos!!!
Todas la semanas sin falta
Cuando leonidas iba a decir cules eran estos elementos, y yo no lei la descripcion, ya tenia una idea de cuales eran y no pude evitar sentir que estaba adivinando un pokemon xD
Espero con ansias los proximos videos
Te está gustando el canal?
Excelente clase muy buena, recomendadisima!!
Te lo dije en Centraal y lo digo de nuevo, ADMIRO TU TRABAJO!!
Muchas gracias Elandy, todos los días mejorando
Que buen tutorial Leonidas gracias.
Gracias por verlo Claudio y otra vez más por compartirlo
Hola hace poco me suscribi y la verdad me haz dejado sorprendido con este "truco" hrml yo quebrandome la cabeza y pfff se puede sin js
Excelente! mira que hay mucho más trucazos como este en el canal.
Buen video leonidas eres muy bueno en lo que haces y te propones
Siempre con las mejores intenciones
Muy buena la iniciativa! Te sigo hace muchos años desde instagram, platzi etc.. Eres el mejor, hace mucho que te queriamos ver en youtube compartiendo conocimiento!! Muchas de las cosas que aprendí me llevaron a estar en el trabajo que tengo hoy( Estoy desarrollando una extensión en Microsoft Azure con contacto directo con Microsoft y estoy como Microsoft Partner) , es mas hasta alguna que otra ves me diste consejitos por insatagram :D
Un poco de feedback que podría ser de ayuda en este nuevo emprendimiento:
A resaltar
- La forma en la que explicas: es muy buena, que digas recapitulemos en el funcionamiento o repasemos o cosas que dices para volver a repasar son muy buenas, el conocimiento se fija muy rápido. Sigo pensando que eres uno de los mejores profesores que hay en linea.
- A la audiencia que apuntes: tal vez estaría bueno aclarar siempre si es avanzado, beginner etc.. Y dependiendo del nivel resaltar cosas como la persona que es beginner y esta mirando, como abre el archivo html? Ya que usaste shorcuts y tal vez no les queden claro.
Sobre el la composición del video
- El titulo del vídeo : Se que es una prueba de concepto, pero títulos mas descriptivos en los cuales también se explique que vas a hacer sirven mucho, así uno no tiene que mirar medio vídeo para ver que se esta trabajando, sino despertar el interés de entrada.
- La música del vídeo: Pienso que el volumen podría ser un poco menos, ya que al ser repetitiva llega a cansar al tratar de concentrarse en el código y lo que explicas con la melodía tan arriba, tal vez una mas calmada podría funcionar mejor.
Eres el mejor! Te deseo todos los éxitos en esta nueva etapa! Aquí tienes un fiel seguidor y amigo a la distancia como siempre digo! Un gran abrazo desde argentina y sigue así!! :D
Lucas Zanek del mejor feedback que me han dado en la vida, gracias Lucas
ya me suscribí ! espero que subas muchos tutoriales increíbles para que podamos mejorar nuestras habilidades.
Suscripción y campanita
muy bueno
gracias Leónidas
Siempre aprendo algo nuevo con Leonidas, excelente mi pana.
Y yo siempre aprendo enseñando
Buen aporte material muy practico
Compártelo con todos
Muchas gracias Leo y los mejores deseos para tu proyecto!
Muchas gracias Ferney, comparte los vídeos por favor
Eres un crack!.. Este canal será un exito!..
Poquito a poquito va creciendo
Excelente video.
Sos grande y todo va a ir muy bien, excelente producción y contenido
JohnAlexanderG a seguir experimentando!
Felicitaciones, muy bueno el video. Te sigo desde platzi, éxito en tus videos, aquí tendrás un fiel seguidor :)
Muchas gracias Arturo!
excelente video, me gusto mucho. Me pusé a buscar shortcuts de vs code al ver como movias de facil el codigo, jajaj.
Muy bien!
Excelente video!! Todo profesional
Desde platzi te sigo. Saludos desde Guatemala.
Marino Pablo saludos hasta Guate, espero ir alguna vez
Tremendo video leonidas!
Gran clase, esas etiquetas no las colocia, serán una gran solucion
Eres un excelente profesor, aprendí a programar con tus cursos de Platzi! :3
Wow Miguel, que bueno tenerte por acá. Comparte las clases con tus compañeros 😁
Tanto tiempo desarrollando web y no conocia este jutsu, saludos desde nicaragua..!
Mr. Samuel ah website
Abro GitHub y ya esta el código ahí, me auto spoilee jajajaja sin querer...
Sencillo y super práctico... Saludos Leonidas :D
jajaja el código habla por si solo
Excelente video leo , podrías decirme como es que el detail donde le das click queda abierto si con el for le quitas el atributo open a todos.
Es por el orden de ejecución de eventos
Genial!! ya espero la proxima clase
Que tal han estado las clases?
Hola Leonidas, muy buen video, soy nuevo en esto de js y hay algo que me llamo la atencion... ¿Por que declaras las variables anteponiendole $ ? Nunca habia visto esto y me llamo la atencion.
Es una convención para saber que ahí almaceno una selector
estuvo bueno. gracias por la practica. res un crack
Que bueno saber eso Miguel, un abrazote
Geniaal!
Sigue así Leo !
Cada semana nuevo vídeo
Amé la reacción por hacerlo a la primera JAJAJAJAJAJ.
Leonidas, porque prefieres React antes que Ionic ??
Son cosas un tanto diferentes para comparar Ionic es para apps móviles y React para web apps. Quizá te refieres a React Native, me gusta porque reutilizo conocimiento aunque flutter también está pro
Esta super tu bulbasaur!!!!
Hola...una duda, por qué preferiste usar document.querySelectorAll() en vez de getElementById() ???
Te pregunto por qué este tipo de cosas siempre me confunden, una es mejor que otra???
Saludos 🙃👋🏻
QuerySelector es más versátil y querySelectorAll trae más de un elemento, así que si necesitas muchos es una gran manera, getElementById tiene el beneficio de ser específico y de un elemento, ninguno mejor que otro solo más opciones
Yo, creo que lo tienes todo para triunfar Leonidas. Rifate y cuanta con mi feedback en los siguientes videos.
Cada semana sin rendiste!
eres grande, saludos desde Tarapoto - Perú
elvis bravo sandoval arriba Perú 🇵🇪
Muy buen video, no conocia esta forma de hacerlo
Y yo tampoco hasta hace muy poco
Genial, excelente video Leonidas!
Mil gracias por ser parte
No entendi muchas cosas, pero por que no estudio programacion jajaja. Excelente trabajo Leonidas, la tienes clara. PD: Esta super la idea de tu canal. Saludos.
Jajajaj, te gustaría aprender a programar?
@@LeonidasEsteban Si, Leonidas. Hoy me decidí aprender a programar en Python. Ya comencé con la primera Clase del curso de programación en Python de Platzi. Saludos.
se puede cambiar el icono de la flecha por otro diferente ?
Puedes usar un súper truco con speudo elementos after y before y así hacerlo custom
Excelente Leo muy buen tutorial
Cada vez intento hacer contenido de mejor calidad
Increíble muchas gracias enserio necesitaba este video ; )
Wooow! Está chido. Que bueno que encontré el canal 😁
Consegito: puedes posicionar tu cursor al final (o como se llame) con la tecla [end]
Bueno, a mí se me hace más cómodo que dar clicks al fin de la linea pero todo se vale
Creo que no tengo esa tecla en mac :(
saludos desde cusco-peru
Saludotes
Muy buen video, me gusto mucho!
Mil gracias Gian, espero siempre ganarme tus likes y que lo compartas con tus amigos
Que tal la compatibilidad con los navegadores?
Buenisimo, gracias.
A ti, suscríbete y ponle la campanita.
Muy bueno! Qué modelo de Mac usas y qué características tiene?
Andrés Montoya es una de 15 top of the line del 2017
Muchas gracias! Dejo una pregunta: ¿Se pueden quitar las flechas del tag summary con CSS?
Claro, están en un speudo elemento, inspecciónalo y quítalos con un display none
@@LeonidasEsteban Geniaaaaal :)
Muy bien amigo. Excelente. Estas etiquetas si funcionan con todos los navegadores?
Javier Del Porte Perez funciona muy bien en todos los modernos excepto edge donde tendrá compatibilidad hasta su siguiente versión pero eso pasará muy pronto
@@LeonidasEsteban ah muchas gracias. Se agradece la respuesta eres el primer yutuber q me responde. Algo. Excelente tus videos. Saludos
Me voy a ganar a pulso ese excelente servicio 5 estrellas ⭐️
Hubieron algunas partes donde volteabas a ver la cámara y no se escuchaba lo que decías.
Por todo lo demás esta excelente
Buen tutorial. Saludos
Ya he ido mejorando eso, que tal vas las clases actuales?
QUE GRANDE!! NO SABIA QUE EXISTÍAN ESAS ETIQUETAS!!
Y cada semana se aprende algo nuevo
Gracias Leo, Ahora una question; Cómo puedo mover las flechas para que aparezcan a la derecha del texto
Se puede realizar con un pseudoelemento after
@@martindominguez9217 Muchas gracias me puedes dar un ejemplo
Un genio!
Fan de esta nueva faceta
Y yo enamorado de crear contenido
Genial. Sigue subiendo vídeos.
Todas las semanas con mucho cariño
Grande Leonidas 😁 . Lo único es que se escuchaba un poco bajito pero nada que unos audífonos no resuelvan
Creo que ya hemos resuelto eso en los vídeos actuales, que opinas?
Genial me encanta
Mil gracias por comentar
Leo, ¿cómo sabe la función expand que no le tiene que quitar el atributo *open* al details que queremos abierto?
Salvador Hernandez buena pregunta, es por el orden del evento. Lo de ocultar cosas ocurre antes de que el clickado mande su propio open
@@LeonidasEsteban Hola Leo, y como puede ser para que ocurra después, es decir si ya esta abierto que al dar click lo cierre, saludos =)
Saludos desde Tacna-Perú :D
Un abrazote hasta Tacna, mi ciudad heroica
muy bien!
Muchas gracias Alvaro
me gustaría saber donde puedo la convinacion de teclas que manejas por ejemplo las linias para cerrar todos con li
Es solo usar control mientras hago clicks para tener múltiples cursores disponibles
buen video maestro
Es con mucho cariño, espero te haya servido. Hay otro montón de clases en canal para que aprendas cositas nuevas.
Excelente explicación
Mil gracias Jhonatan
Eres mi ídolo.
Yohan Graterol 😘
Si le quitas el atributo open a todas las listas ,todas las listas quedan cerradas ??
Siii
Leonidas explicas genial! pero tus clases deberían ser sin música de fondo tipo platzi, es una sugerencia, muchos éxitos!
Ya aprendí de esto, mira las clases más actuales 😁
Excelente
Mike Nieva gracias Mike, eres mi ídolo.
Genial, eres un crack!!
Mil gracias Natanael
Buen dato
Leonidas porque no usas Twich?......y lo podrias hacer en realtime
He visto que muchos andas por allá, creo que hay más personas en RUclips aparte de herramientas de distribución.
Leo muy buena la clase, te convendria mejorar el tema microfono!!! por lo demas esta muy bien todo!!!
Felicidades en tu proyecto!!!
Todas las semanas mejora un poquito más la producción
Un menu para mobile multi nivel estaría genial leo!
Tengo unos vídeos viejos donde enseño eso aunque ahora tengo nuevas técnicas
Excelente profe!
Comparte las clases
Buenos días, disculpa alguien se ha topado con este error Uncaught TypeError: $details.removeAttibute is not a function