Building a Sliding CSS Menu without JavaScript

Поделиться
HTML-код
  • Опубликовано: 4 ноя 2024

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

  • @marnelrahimi6530
    @marnelrahimi6530 3 года назад

    This is awesome! As a beginning coder, I really loved your explanation and the way that show step-by-step what each piece of code is doing! I do have a question about the width of the gold band. Is there a way to make it more narrow? I'm trying to make a menu that has a thinner line with the links display. I'm playing around with padding, but so far all I've done is make the band yellow with the links showing underneath the band.

    • @SelfTeachMe
      @SelfTeachMe  3 года назад

      @Marnel You should be able to change the width value for nav in the CSS. I set it to 100vw, but you could make it much more narrow. Changing the padding, will also change the spacing between the text and the edge of the gold band. -- Let me know if you're still having trouble.

  • @fawork
    @fawork 2 года назад +1

    I love the video, it hadn't occurred to me to use the checked property for this. Excellent tutorial, thanks!👍

  • @alexfernandesgarcia
    @alexfernandesgarcia 2 года назад

    Great tutorial, but how can I do this positioning on the right?
    I've been looking for something like that, just with CSS, but haven't found it ...

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

    Brand new to codepen, how are you having it complete your code for you? You typed "div.hamburger" and it processed it to "". I'm not getting that result.

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

    Putting the label around the whole menu item and not just the hamburger menu /MENU text confuses me. Won’t that trigger the checkbox if you click on one of the menu links eg About?

    • @SelfTeachMe
      @SelfTeachMe  9 месяцев назад +1

      That's a good question ... I *think* it has to do with how click events bubble. ... TBH, this video was recorded ~3 years ago ... I think there are probably more efficient ways to do this now using the :has selector. Are you familiar?

    • @clevermissfox
      @clevermissfox 9 месяцев назад +1

      @@SelfTeachMe it's one oh my FAVOURITE. I got so excited the day Firefox got on board!!! Now I'm waiting for then to get on board with lineargradient(in oklab, oklch(33% 0.3 350.... ). Just won't show the grade if it has the "in oklab" keywords

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

    Really really thanks mrs this is really helpful u should to have 1 milion subscribers really thanks

  • @stevePurvis1
    @stevePurvis1 3 года назад +1

    Brilliant tutorials, Thank you very much.

  • @bleulola
    @bleulola 3 года назад +1

    Thanks a lot!!! This is very informative

  • @3ds0nB4rb0s4
    @3ds0nB4rb0s4 2 года назад

    Great, thank you!

  • @DanielPaz-v8b
    @DanielPaz-v8b 11 месяцев назад

    No idea what you are even going to build without having to scroll through the video and guess lol

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

      Appreciate the feedback

  • @foupax
    @foupax 3 года назад

    You are a ⭐, thank you. 👏

  • @GaponovaT
    @GaponovaT 3 года назад +1

    Спасибо! У меня всё получилось)))

    • @SelfTeachMe
      @SelfTeachMe  2 года назад +1

      Awesome! Glad to hear that!

  • @ronnymabuza5406
    @ronnymabuza5406 2 года назад

    Nice

  • @mindtechsavant
    @mindtechsavant 4 года назад

    Nice 👍