Using Modern CSS To Make A Hamburger Nav In A Few Lines Of Code - Fully Accessible too!

Поділитися
Вставка
  • Опубліковано 14 жов 2024

КОМЕНТАРІ • 39

  • @InSaneRoGer112003
    @InSaneRoGer112003 3 місяці тому +5

    @starting-style is a game changer wooo thanks for making a vid on this

    • @frontendfyi
      @frontendfyi  3 місяці тому +1

      Thanks for commenting! Glad you liked the video!

  • @buildervision7082
    @buildervision7082 3 місяці тому +1

    This is so great I've been looking for a developer UA-camr who also teaches accessibility

    • @frontendfyi
      @frontendfyi  3 місяці тому

      Nice!! Happy you like my content 🙏 Always feel free to share ideas for topic you’d like to see content of.

  • @ilan117
    @ilan117 3 місяці тому

    I ❤ this channel … thank you so much for sharing and teaching us ✌️

    • @frontendfyi
      @frontendfyi  3 місяці тому

      Glad you enjoy it! Thanks for sharing this with me too! ❤️

  • @soniamaklouf1178
    @soniamaklouf1178 3 місяці тому

    Thanks for this video
    could you make a video on CSS trig functions
    I've seen ana tudor doing great things on codepen like her " No SVG, no image, CSS-only fluid slider with input"

  • @akinbobolaemmanuel3319
    @akinbobolaemmanuel3319 3 місяці тому +2

    What vscode theme are you using? I like the font also. I would like to change mine :)

    • @frontendfyi
      @frontendfyi  3 місяці тому +1

      It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
      The font is called Recursive Mono Casual Static

    • @akinbobolaemmanuel3319
      @akinbobolaemmanuel3319 3 місяці тому +1

      @@frontendfyi thank you 😊💃

  • @Mempler
    @Mempler 3 місяці тому +2

    It's such a simple but awesome feature. It's always such a pain to implement this in jsx especially if you want animations

    • @frontendfyi
      @frontendfyi  3 місяці тому +1

      I really like it! And that fact that is so new but we can use it everywhere already is even more amazing. I love the direction CSS is heading into!

  • @bramvandinteren
    @bramvandinteren 3 місяці тому

    Ahhhh yesss, eindelijk transitions van display:none naar flex! Neem aan dat dit altijd gebruikt moet worden i.p.v. opacity:0; visibility:hidden toch?

    • @frontendfyi
      @frontendfyi  3 місяці тому +1

      In dit geval combineer je het met bijv opacity 0 om een fade-in te krijgen. Display none en block hebben zelf geen waardes waartussen ze geanimeerd kunnen worden. Dus als je animeert naar display none, zal de browser op het laatste moment de property naar none zetten. Om dan een animatie te zien moet je zelf nog opacity animeren.

  • @alexpanteli3651
    @alexpanteli3651 3 місяці тому

    Eventually we will get rid of all these UI libraries. Hopefully. Thanks for the great content😊

    • @frontendfyi
      @frontendfyi  3 місяці тому +2

      I love the direction css is heading into. Doing these things with plain css definitely is the way! Glad you like the content 😌

  • @mouadt-b8042
    @mouadt-b8042 3 місяці тому

    this is just amazing
    thanks bro

  • @MonarchofSouls
    @MonarchofSouls 3 місяці тому

    What a great video!

  • @MyGeorge1964
    @MyGeorge1964 3 місяці тому +1

    Nice!

  • @meylis_so2
    @meylis_so2 3 місяці тому

    bro something lol i found when u write this : popover=" " i didnt an :
    ///
    but i use it anyways cause i can make some error

  • @rakacoustic8127
    @rakacoustic8127 Місяць тому

    I'm excited

  • @abhishekkadam2999
    @abhishekkadam2999 3 місяці тому

    Is there a difference from the dialog element, other than being pure css.

    • @frontendfyi
      @frontendfyi  3 місяці тому +1

      The specs make a distinction which they call “modal” or”non-modal”. A dialog is a modal pop-up, which means that in order to dismiss that, the user _has_ to make an important choice in the dialog before it can be dismissed.
      The popover is non-dialog, meaning it does not have that restriction. This is also why for example the popover auto closes when you click the backdrop vs a dialog which you need to run a JS method for this to happen.
      There’s a lot of overlap between the two elements and you can definitely create a non modal with a dialog too. But this is what the docs say is their intended behavior.
      See here too: developer.mozilla.org/en-US/docs/Web/API/Popover_API#concepts_and_usage

  • @Tapadar.Monsur
    @Tapadar.Monsur 3 місяці тому

    What VSCode theme are you using, Jeroen?

    • @frontendfyi
      @frontendfyi  3 місяці тому +1

      It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
      The font is called Recursive Mono Casual Static

  • @PlayerRPG85
    @PlayerRPG85 3 місяці тому

    Liked and subscribed!!!

  • @ThaufiqSirajShaik
    @ThaufiqSirajShaik 3 місяці тому

    What theme are you using for vs code?

    • @frontendfyi
      @frontendfyi  3 місяці тому

      It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
      The font is called Recursive Mono Casual Static

  • @benve7151
    @benve7151 3 місяці тому +1

    10/10

  • @meylis_so2
    @meylis_so2 3 місяці тому

    bro bro make a video about :has() :is() and so on. come on bro u re the best

  • @feelsthevibes1662
    @feelsthevibes1662 3 місяці тому

    Which theme?

    • @frontendfyi
      @frontendfyi  3 місяці тому

      It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
      The font is called Recursive Mono Casual Static

  • @sajadsalamian6953
    @sajadsalamian6953 3 місяці тому

    Can somebody name his font????????

    • @frontendfyi
      @frontendfyi  3 місяці тому

      The font is called Recursive Mono Casual Static