CREA un DROPDOWN Menú ** SOLO CSS **

Поделиться
HTML-код
  • Опубликовано: 17 окт 2024
  • 📣 ¿Necesitas un Hosting y Dominio? Utiliza el cupón "ALEXCG" hasta 90% de descuento en Hostinger.com.
    ENTRA AQUÍ 👉 www.hostinger....
    Crea un menú desplegable únicamente con CSS, sin utilizar JavaScript.
    📘CURSO CSS3 COMPLETO (Descuento) 👉 alexcgdesign.c...
    Descarga los archivos: alexcgdesign.c...
    -----------------------------------------------------------------------------------------------------------------------------
    Aprende CSS (Desde CERO en RUclips) 👉 • 🚀 Curso CSS PARA PRINC...
    -----------------------------------------------------------------------------------------------------------------------------
    CURSOS COMPLETOS:
    📘CURSO CSS3 COMPLETO (Descuento) 👉 alexcgdesign.c...
    👨‍💻🎁 Diseño Web Desde Cero (Descuento) 👉 alexcgdesign.c...
    -----------------------------------------------------------------------------------------------------------------------------
    ✉️ Redes sociales:
    Blog de desarrollo web: www.alexcgdesi...
    Twitter: / alexcgdesign
    Facebook: goo.gl/7o77tx
    Linkedin: goo.gl/byCJnS
    Instagram: / alexcg_design
    Github: github.com/Ale...

Комментарии • 53

  • @AlexCGDesign
    @AlexCGDesign  Год назад +1

    📣 ¿Necesitas un Hosting y Dominio? Utiliza el cupón "ALEXCG" hasta 90% de descuento en Hostinger.com.
    ENTRA AQUÍ 👉 www.hostinger.com/alexcg

  • @CarlosDanielACh
    @CarlosDanielACh Год назад +2

    Un duro bro 🔥🔥🔥 Espero aprender mucho en tu curso de CSS, ya lo compre!!!

  • @davidm.8835
    @davidm.8835 Год назад

    Fantástico! Aparenta un menu más de tantos, pero si le sigues bien el código ves la mágia. Muchas gracias por la dedicación y ánimo para hacer la opción desktop!

  • @tadeoriganti
    @tadeoriganti 2 месяца назад

    Me gusto mucho, la verdad, todo lo que sea sin JS me parece fascinante. Me encanto la dinamica de usar variables locales para armar un switch, aprovechandose de la dinamica de la cascada.
    Lo que no me gusto, y esto tomenlo con pinzas, fue que tiene problemas de accesibilidad (con el focus y la navegacion keyboard especificamente). Ahora bien, desconozco si este problema tambien lo tiene la tecnica con javascript. Igual no es como que no se pueda resolver, pero quizas le agrega ese plus que se intentaba eliminar por no hacerlo de la manera tradicional.
    Igualmente asi como esta, esta perfecto. De las explicaciones mas claras que vi y encima usando BEM!

  • @adriel8152
    @adriel8152 Год назад +6

    Impresionante. Yo tengo tu curso de CSS en Udemy. Me pareces un master en CSS, y no me lo tomes a mal pero, me cuesta mucho entender cuando explicas. Eso mismo me pasó en el curso de Udemy, y lo dejé pendiente por eso. Mi intención no es ser un comentario negativo, sino expresarte lo que percibo, y si te sirve quizá para mejorar en tus explicaciones pues qué beneficio, porque quizá como yo haya más gente, y explicar de manera más clara te serviría para tener más alcance a más gente. En cualquier caso, gracias por compartir el tutorial y tus conocimientos en general. Buen video!

    • @jordyperez9969
      @jordyperez9969 Год назад

      Me pasa lo mismo, no suelo concentrarme si alguien explica de esa manera, quizas otras personas si, pero necesito que la persona este casi como si fuera hablando conmigo, una charla de amigos para entenderlo, como lo hace Fernando herrera en udemy.

    • @novatocode
      @novatocode Год назад

      Por esa razón no compro los curso de el, porque la menera de explicar es muy acelerado y difícil de entender o de seguir, pero igual no se le quita que es un máster en CSS

    • @astrixwr5662
      @astrixwr5662 Год назад +1

      Que temas se te dificulta en css?
      Yo en su mayoría aprendi de otra manera pero me gustaría ayudarte almenos con lo que sé.

    • @SPARTAN-092
      @SPARTAN-092 Год назад +1

      Hola qué tal, espero ser de ayuda amigo, yo le bajó la velocidad a los cursos de udemy cuando no puedo seguirles el ritmo, yo también compré su curso, está muy bueno en contenido la verdad, saludos.

    • @moy_4520
      @moy_4520 Год назад +1

      Yo como ya tengo bastante conocimiento en css3 los vídeos de el se me hacen bastante sencillos, quizás no puedes seguirle porque aún te falta práctica, es opinión personal ya que a mí no se me dificulta su forma de explicar.

  • @alvarobarreto7482
    @alvarobarreto7482 Год назад +1

    Muy buen contenido master, cada vez aprendo mas con tus videos, es magnifico hacer todo este menú solo con CSS, gracias por compartir tus conocimientos, sigue así mi estimado. Me pondré el reto para adaptarlo a desktop. Gran video como los muchos que has subido👏

  • @CrossEliud
    @CrossEliud Год назад +1

    Eres un pro muchas gracias, me gustaria ver la 2da parte, eso si no se porque, me costo entenderlo son tantos detalles en un instante

  •  Год назад

    Estaría genial llevar este menú, para que fuese móvil y verlo normal en desktop, eres un crack Alex 🏆

  • @joel-rg8xm
    @joel-rg8xm Год назад

    Gracias, de entre mucho buscar, este es el menu que implementaré en mi sitio pero aún seguimos esperando la parte 2 para que sea responsive. Te felicito también porque en la actualidad me suena a que ya estas dejando esa forma de explicar como por enunciados que hacía un poco difícil entenderte, como que distraía la concentración.

  • @danielarroyofranganillo22
    @danielarroyofranganillo22 Год назад

    Gran trabajo. Me ha encantado. Bien explicado y muy útil. Gracias.

  • @jorgeperales_98
    @jorgeperales_98 5 месяцев назад

    ¡Me encantó el tutorial! ¡Muchas gracias!:D

  • @javierarmandovargasvega606
    @javierarmandovargasvega606 3 месяца назад

    Excelente video.
    Me parece bien que hagas la versión de ese mismo menú, pero para desktop. Lo busqué y no lo encontré, por lo que supongo no se ha hecho. O no busqué bien.
    Felicitaciones y muchas gracias por enseñar

  • @juliocercado1132
    @juliocercado1132 Год назад

    Mi estimado se te agradece el diseño muy bueno para poder implementarlo

  • @andresbarilin9524
    @andresbarilin9524 Год назад

    Me encanto tu solucion y me sirvio muchisimo, muchas gracias!!

  • @drogui_2.0
    @drogui_2.0 Год назад +1

    Hola amigo, como puedo hacer un carrito de compras con css? gracias!

  • @valentinalbornoz7073
    @valentinalbornoz7073 Год назад +1

    Hola como va?, tienes algun video de como crear un dropdown en un menú con solo css, me refiero a que no sea un solo dropdown si no que varios, por ejemplo tienes 3 secciones por ejemplo marketing, desarrollo, proyectos y esas 3 secciones tienen contenido dentro por ejemplo marketing "seo", "branding", desarrollo "wordpress" "html css y js" y en proyectos "galeria de fotos", gracias o si tienes algun ejemplo que hayas hecho y lo hayas subido a js genial

  • @mayradenot146
    @mayradenot146 Год назад +1

    Hola buenas tardes, nose si me podran ayudar, pero estoy intentando hacer un menu desplegable en el que cuando el usuario haga click en los links dentro de el, por ejemplo el INICIO, CONTACTO, AYUDA, etc me lleve a esa seccion de la pagina y paralelamente el menu se cierre automaticamente.

    • @luisenriquecaleroanchelia6369
      @luisenriquecaleroanchelia6369 5 месяцев назад

      En javascript, tienes q obtener el enlace que hizo el click , y luego obtener su padre y cerrarlo con una clase de css

  • @WilliamGRojas
    @WilliamGRojas 4 месяца назад

    Esta muy bueno el video, gracias

  • @herbertsaldavaasencios5396
    @herbertsaldavaasencios5396 Год назад

    Buen ejemplo a ver si te animas a hacer el desktop para la comunidad!!!

  • @gamuro6977
    @gamuro6977 Год назад

    genial, sabrias como hacerlo con react y tailwind o de alguna otra manera que no sea css puro?

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

    Excelente!! Mil gracias

  • @Loyola-zc1ud
    @Loyola-zc1ud 8 месяцев назад

    Muy buen video manito

  • @Joel-kr6ex
    @Joel-kr6ex 9 месяцев назад

    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.

  • @LectorFuribundo
    @LectorFuribundo Год назад

    Muy bien una excelente y practica solución 👍🏼

  • @moisescarri6584
    @moisescarri6584 Год назад

    Buenísimo gracias por la información

  • @alan_jonatan
    @alan_jonatan 4 месяца назад

    tremendooo!!

  • @julioCT2004
    @julioCT2004 Месяц назад

    Esta propiedad es compatible con todos los navegadores o aún es experimental?

    • @AlexCGDesign
      @AlexCGDesign  Месяц назад

      Aquí te lo explico:
      💪 Tutorial Pseudoclase :Has() - ¿No más JavaScript?
      ruclips.net/video/9oghptyxHEg/видео.html

    • @julioCT2004
      @julioCT2004 Месяц назад

      @@AlexCGDesign gracias:D

  • @stuardqc
    @stuardqc Год назад

    Cuando se agregan mas dropdown__links, y los expandes el contenido inicial se va perdiendo y solo puedes hacer scroll hacia abajo

  • @annarodriguez4073
    @annarodriguez4073 Год назад

    muchas gracias Alex, ¿como podria hacer un dropdown dentro de otro dropdown?

    • @davidm.8835
      @davidm.8835 Год назад

      Para lo que quieres hacer tienes que anidar, copiar/pegar o escribir las listas ul li dentro de la principal.

  • @Pablo_Escalona
    @Pablo_Escalona Год назад

    Hola Master, sería bueno un curso con superpoderes de Bootstrap (:

  • @Vibe-136
    @Vibe-136 3 месяца назад

    genial 🗿

  • @luisponce2760
    @luisponce2760 Год назад +1

    Alguien sabe si la pseudoclase :has es compatible con el navegador mozilla firefox?

    • @cyranoEibar
      @cyranoEibar Год назад +1

      No, de momento es el único navegador que no la soporta, no se si habrá algún apaño para estos casos pero no podemos dejar a los posibles usuarios de firefox sin nuestro dropmenu, es una lastima.

    • @luisenriquecaleroanchelia6369
      @luisenriquecaleroanchelia6369 5 месяцев назад

      Usa evento click de javascript, ya q has aún no es soportado en Firefox

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

    verga me acaba de explotar cada neurona que me quedaba viva

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

    me descargue el tuyo y por alguna razon no funciona 😭😭😭q alaguien m explique q polloooo
    edit: en firefox el has no funciona 💀💀💀💀

  • @oh-vito
    @oh-vito Год назад

    Fuera bueno solo colorear el item activo y evitar que se vaya acumulando los item seleccionados.pero muy buen video.

    • @AlexCGDesign
      @AlexCGDesign  Год назад

      Se podría hacer con inputs de tipo radio:))

  • @jonathanel-aziz7708
    @jonathanel-aziz7708 Год назад

    Entendí muy bien, solo que muestras nada mas la funcion para celular

  • @DMLTips
    @DMLTips Год назад

    Genial eres increíble @AlexCGDesign

  • @mada-desarrollo-web
    @mada-desarrollo-web 7 месяцев назад

    Excelente