How To Build An Animated Hamburger Menu With Only CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ธ.ค. 2024

ความคิดเห็น • 158

  • @beinyourguard
    @beinyourguard ปีที่แล้ว +38

    the thing I like about kyle is that he just doesn't go for like something ordinary. he takes something that is somewhat easy to do to a whole new level, bringing scalability to the code itself

  • @codedjango
    @codedjango ปีที่แล้ว +57

    That's some serious CSS skills...

  • @ELMlKO
    @ELMlKO ปีที่แล้ว +12

    in this video Web Dev Simplified became Web Dev

  • @axelandru9346
    @axelandru9346 ปีที่แล้ว +1

    He is the CSS guy of the internet. Bless up Sir !

  • @robmartin6159
    @robmartin6159 ปีที่แล้ว +4

    Awesome video.
    When the colors had to flip with focus-visible, the colors were hardcoded. If the colors in root were changed, the .hamburger-menu:has(input:checked) would use the old colors.
    I played around and discovered that in :root, a var defined can be used in another var. So I created a --light-color and --dark-color and used those for foreground and background. So changing those 2 vars will keep colors consistent.
    :root {
    --light-color: white;
    --dark-color: #333;
    --bar-width: 60px;
    --bar-height: 8px;
    --hamburger-gap: 6px;
    --foreground: var(--dark-color);
    --background: var(--light-color);
    --hamburger-margin: 8px;
    --animation-timing: 200ms;
    --hamburger-height: calc((var(--bar-height) * 3) + (var(--hamburger-gap) * 2));
    }
    .hamburger-menu:has(input:checked) {
    --foreground: var(--light-color);
    --background: var(--dark-color);
    }

  • @chriscentproductions
    @chriscentproductions 11 หลายเดือนก่อน +2

    YESSS!!! I can finally remove some javascript lines with this 😆😆😆

  • @mariejoannaantoniadi227
    @mariejoannaantoniadi227 ปีที่แล้ว +1

    I love you for ever. The calc for the animation didn't work quite as expected when I changed the --bar-width but I worked around it. Perfect, Perfect, Perfect. Many thanks for that.

  • @ozordiprince9405
    @ozordiprince9405 ปีที่แล้ว +1

    Funny you uploaded this. I was literally about to just implemennt something like this but had no idea how

  • @KennehGebra-cf9ds
    @KennehGebra-cf9ds 10 หลายเดือนก่อน +2

    Thanks for making easy thing complicated

  • @SothearithKONGMrMuyKhmer
    @SothearithKONGMrMuyKhmer 2 หลายเดือนก่อน

    That’s the advance css I’ve ever watched.. Thanks a lot for sharing this tutorial. 🥰

  • @felix-ve8jk
    @felix-ve8jk ปีที่แล้ว +10

    Great video, man! Still at the beginning of my coding, but I really liked this one using trigonometry. I'm coming from a machinist and machine programming background, and this was a really fun one for me.

  • @noahr1545
    @noahr1545 ปีที่แล้ว +3

    This is great as always! Love your videos and your courses!!

  • @JaimePereiraDeLima
    @JaimePereiraDeLima 3 หลายเดือนก่อน

    You can get rid of the label if you set "appearance: none" to the checkbox. So you can style it as a block element, including pseudo elements.

  • @patrickr.5821
    @patrickr.5821 วันที่ผ่านมา

    Very elegant approach! 🙏

  • @SoulSovereignty
    @SoulSovereignty ปีที่แล้ว +2

    I think you forgot something. When someone selects a menu option, how do you make the menu disappear? If you are navigating to an entirely new page, then perhaps that "reset" is implicit. However, if you are simply scrolling downward to a section of the page...there needs to be a way to make the menu auto-disappear.

  • @Tobi_Akin
    @Tobi_Akin 4 หลายเดือนก่อน +1

    Thank you. I followed through but I was having issues with the animation and transitioning and i couldn't figure what the issue was

  • @fassie79
    @fassie79 2 หลายเดือนก่อน

    Thanks a lot! I just coded this whole thing along with the video and it works!

  • @ImHansana123
    @ImHansana123 2 หลายเดือนก่อน

    17:46 - Thanks for the tutorial, but I have a quick question.
    Why do we need all of those values in that properties when we can just use " transition: all var(--animation-timing); " ?

  • @MarkConstable
    @MarkConstable ปีที่แล้ว +4

    I got all excited about this, but it doesn't work with Firefox, probably because of "Pseudo-elements are also not valid selectors within :has() and pseudo-elements are not valid anchors for :has()." from MDN. Any workarounds... aside from don't use Firefox?

    • @ahmedbennani5401
      @ahmedbennani5401 ปีที่แล้ว +2

      You have to put the (input) element outside and before the (label) element, and try (input:checked + .hamburger-menu::after) and (input:checked + .hamburger-menu::after) selectors instead, but you will have to add a div for the middle line of the hamburger since the input element won't play that role anymore.

  • @issacjr01
    @issacjr01 4 หลายเดือนก่อน

    Thank you, i was having trouble with the animations part and could not figure out what i was doing wrong :) !!

  • @Caariin88
    @Caariin88 11 หลายเดือนก่อน

    Great tutorial, i love how you also explain so anyone can understand what you are doing!

  • @davidallred991
    @davidallred991 ปีที่แล้ว +7

    I recently had to do one of these for a front end mentor project. For me the actual hamburger menu was not very difficult, what was more complicated was working on the accessibility. Would love to see a video where this is done properly. Although you made a focus highlight on it, it is far from accessible for screen readers and needs a lot more work with aria-labels, changing aria-expanded status on open/close. etc. Would be great to see a video step by step with explanations on this because I found lots of videos on how to make the menu, but couldn't find many on making it properly accessible, so I am sure I didn't do it 100% correct.

    • @keylanoslokj1806
      @keylanoslokj1806 ปีที่แล้ว +2

      Accessibility>>> than just looks

    • @Fooney1
      @Fooney1 ปีที่แล้ว +1

      What % of users use a screen reader?

    • @nbbhaskar3294
      @nbbhaskar3294 ปีที่แล้ว

      ​​@@Fooney1 in the USA, all public websites should comply with Americans with Disabilities Act, other wise you are exposing your business to potential law suites. So, you see it's not just about % of people using screen readers and other assistive technologies. I am not sure about other parts of the world though.

    • @Fooney1
      @Fooney1 ปีที่แล้ว +2

      @@nbbhaskar3294 I really doubt a US company has ever suffered a penalty under that act lol. In business it is about what % will use the thing you just paid for.

    • @Fooney1
      @Fooney1 ปีที่แล้ว +1

      @@nbbhaskar3294 I just looked into and surprising enough a law made in 1990 doesn't mention websites at all. That being said you could get sued in civil court but you cat get sued in civil court for anything. Laws and rights don't matter in civil court anyway so why bother?

  • @MohamadOmar-oi3ur
    @MohamadOmar-oi3ur ปีที่แล้ว

    That's really awesome man!

  • @ivn9119
    @ivn9119 ปีที่แล้ว

    you are the God of CSS .... great job 🙂

  • @gauravvarma3645
    @gauravvarma3645 5 หลายเดือนก่อน

    I actually implemented this for work I was doing for a client, but the big issue here is that the checked state will persist after you click on the navigation links; the only way to reset the navigation menu is to use useState, or else it will stay stuck open when navigating which is not the best user experience. Interesting concept though!

  • @olipaype
    @olipaype ปีที่แล้ว +2

    I learn a lot with this master class, but I tried to run on Chrome, Firefox, Edge, and Brave... in all works but firefox. Is there any compatibility with css selectors?

  • @anabeond
    @anabeond ปีที่แล้ว +1

    Great video! And the way you explained everything was so easy to follow, thanks a lot! You've got a new subscriber :)

  • @eterr9000
    @eterr9000 ปีที่แล้ว +1

    It doesn't work on Firefox and Android chrome?

  • @TRIC4pitator
    @TRIC4pitator ปีที่แล้ว

    omg , using a check box as an on off switch is so smart

  • @astacey84
    @astacey84 ปีที่แล้ว +1

    This
    Is
    The
    Sidebar
    very subtle, good job

  • @yevsell
    @yevsell ปีที่แล้ว +1

    Thank you so much. You saved me my job.

  • @najmantube
    @najmantube ปีที่แล้ว

    I used keyboard tabbing to focus the hamburger icon then pressed 'Enter': nothing happened. I then found out that in order to check a checkbox you have to press the spacebar instead. For screen readers you could put a message inside the label (e.g. Press the spacebar to open the menu) but keyboard users 1) don't necessarily use a screen reader, 2) aren't necessarily badly-sighted so how, other than having the same text printed on the screen, do we inform them of this unusual behaviour? I'm assuming that most people would think they're dealing with a button (which is toggleable using the 'Enter' key), not a checkbox.

  • @mariumbegum7325
    @mariumbegum7325 ปีที่แล้ว

    Very interesting tutorial - great work!

  • @Zeero3846
    @Zeero3846 ปีที่แล้ว +1

    So one thing I'm curious about is if the hamburger menu weren't up in the corner. What if it was below a header that could also change in size? Personally, I don't think it's ideal, but I may be stuck with it for the time being.

  • @renejacques8288
    @renejacques8288 6 หลายเดือนก่อน

    Say I select a link from the sidebar, how can change its color or put a line under it so I can see what link is selected please? Great video.

  • @theisoj
    @theisoj ปีที่แล้ว

    Very great tutorial! Thanks Kyle!

  • @alilatoon
    @alilatoon ปีที่แล้ว

    I am wondering how would I be able to select multiple classes after the "+ .sidebar" I realize now it only works on one class but I need it for multiple classes.

  • @joao-lucky
    @joao-lucky ปีที่แล้ว

    great video, very simple and taught

  • @deankinyua2365
    @deankinyua2365 10 หลายเดือนก่อน

    This is genius bro

  • @vido-42
    @vido-42 ปีที่แล้ว

    I can only say thank you! I learned so much by watching this video... superb content! god bless you and your fam!

  • @Zeero3846
    @Zeero3846 ปีที่แล้ว

    Glad to know how the transform actually works finally. I implemented a CSS only button a while back, but I had to go through a lot of guessing to figure how it worked because CSS devs didn't believe in variables for the longest time, so most of the examples used pre-calculated numbers with no explanation, which was exacerbated by the fact that the animation wasn't symmetric either.
    Also, the has() selector (and I think also the transform style) wasn't around when I implemented my button, so I'll probably take a second look at that and see if my company is already using capable browsers.

  • @SLC2010Charleston
    @SLC2010Charleston 11 หลายเดือนก่อน

    Works great. I would also like to turn on a transparent overlay across the page to prohibit a user from clicking on anything other than the menu. It is defined display "none" but the "has" selector doesn't seem to want to set the display property to block. Is there a limitation to "has"?
    .hamburger-menu:has(input:checked) + .overlaypage{
    display:block;
    }

  • @sonbui7063
    @sonbui7063 7 หลายเดือนก่อน

    does the hamburger menu button and the menu list has to be in the same div class ? Cuz in my code the menu list and button are in different div class (the button is in the header class while the list is in the main class). And when i try the animation the list does not slide in as expected :)

  • @vickrammark2082
    @vickrammark2082 ปีที่แล้ว +1

    Hey Kyle this was an awesome viedo. I have a doubt how to make a div expand from right to left. I have been seeing different solutions for it but nothing satisifies me. Please do a shorts on it.

    • @Infiniband11
      @Infiniband11 8 หลายเดือนก่อน +1

      Did you work this out? Trying to do the same.

    • @ALifeLivedFully
      @ALifeLivedFully 4 หลายเดือนก่อน

      Same lolll 😂

  • @DJ66SXX
    @DJ66SXX 10 หลายเดือนก่อน

    .hamburger:has(input:checked) + .sidebar does not work, maybe there has been a CSS update from last year?

  • @PeterPan3713
    @PeterPan3713 ปีที่แล้ว

    This is awesome! Thank you very much for sharing!

  • @matthewharting3390
    @matthewharting3390 ปีที่แล้ว

    What do you do for those using Firefox as it does not use :has yet, without explicitly telling Firefox to allow it.

  • @JnoobGodMode
    @JnoobGodMode ปีที่แล้ว

    bro i have an issue, the problem is that i can still scroll and since the size is fized i can see the bottom, idk how to stop it from scrolling, can someone help me pls...

  • @rafaelvarela619
    @rafaelvarela619 ปีที่แล้ว

    My before and after pseudo elements are somehow with a line around then in bigger screens and it changes the color os the lines, can someone help me with that?

  • @blaneandgame9
    @blaneandgame9 ปีที่แล้ว

    when focused the checkbox still has an outline

  • @kodomo5490
    @kodomo5490 ปีที่แล้ว

    is it possible to do this if the sidebar is not located near the checkbox?

  • @Fooney1
    @Fooney1 ปีที่แล้ว

    Prefect timing.

  • @cbennder3877
    @cbennder3877 ปีที่แล้ว

    Top, works very well, Thank you Kyle

  • @ToddGarcia-s3l
    @ToddGarcia-s3l 5 หลายเดือนก่อน

    my main question is why not just upload a photos, takes much less time then custom var?

  • @ramsundararaman6615
    @ramsundararaman6615 ปีที่แล้ว

    This is a cool lesson Kyle! Thank you very much.
    Any reason why whatever that's added to the html gets rendered below the fold? Maybe the sidebar should have a style that allows for the main content to display within the fold?

    • @ramsundararaman6615
      @ramsundararaman6615 ปีที่แล้ว

      Also, it doesn't seem to work in Firefox!

    • @kenthhagstrom
      @kenthhagstrom ปีที่แล้ว

      @@ramsundararaman6615 the :has selector is currently not supported by Firefox

  • @harshalmali856
    @harshalmali856 ปีที่แล้ว

    this is cool video bro thanks for it highly recomended to all to go through some modern web development

  • @panka33
    @panka33 10 หลายเดือนก่อน

    what is that '*,' (asterisk+comma) at the very beginning of the CSS file? Cheers

  • @OMG-ho8nk
    @OMG-ho8nk หลายเดือนก่อน

    when i have "pointer-events: none" my checkbox will not check and uncheck 😞

  • @NOTHING-en2ue
    @NOTHING-en2ue ปีที่แล้ว

    you're great Kyle

  • @martinkusy2560
    @martinkusy2560 ปีที่แล้ว

    I can't get it work in Firefox. Any idea why that could be.

  • @mohammedkaka5558
    @mohammedkaka5558 ปีที่แล้ว

    cool but the :has property does not work on firefox so it does not cross (X) the hamburger

  • @Ossielmx
    @Ossielmx ปีที่แล้ว

    Thank's Kyle!
    ⛽ Creative code☕

  • @mjshubham21
    @mjshubham21 ปีที่แล้ว

    It was awesome!! How can we implement the same in react?

  • @nikhilgupta6415
    @nikhilgupta6415 8 หลายเดือนก่อน

    I'm a fan now

  • @danieldragan9220
    @danieldragan9220 ปีที่แล้ว

    @wedbevsimplified Help! How do I stop scrolling in the background when the burger menu is open on mobile??

  • @ivanchiazzari7904
    @ivanchiazzari7904 ปีที่แล้ว

    At school I thought we would never use the theorem, but now we see Pythagoras everywhere😃

  • @medvedevleandro
    @medvedevleandro ปีที่แล้ว

    Thank you very much, Kyle.

  • @ELMlKO
    @ELMlKO ปีที่แล้ว

    visual studio code at 13:21

  • @patcollins1779
    @patcollins1779 ปีที่แล้ว

    Thanks Kyle. I'm a novice web designer and trying to learn. I've spent a few hours trying to adapt this to be a header or "top bar" rather than a side-bar and I am struggling. Can anyone suggest a straightforward way to put this hamburger menu at the top right in a header? Thank you so much!

    • @meganlove5681
      @meganlove5681 ปีที่แล้ว +1

      I need help with the same thing. I managed to get the hamburger icon over to the right but can’t figure out how to get the sideabr over to the right. I put my logo, navigation, and the hamburger checkbox in the header. my logo is postioned to the left and that is ok.

    • @marina-__-
      @marina-__- 3 หลายเดือนก่อน

      @@meganlove5681 .sidebar {
      transition: translate var(--animation-timing);
      translate: 100%;
      it's on the translate i think
      or to have it from the top:
      .sidebar {
      transition: translate var(--animation-timing);
      translate: 0 -100%;

  • @jp_vids9631
    @jp_vids9631 ปีที่แล้ว

    Can you make a video that covers object relational mapping (ORM )

  • @SkyFly19853
    @SkyFly19853 ปีที่แล้ว

    Could you also make a tutorial on dark mode them with a responsive nav bar?
    Thank you in advance!

  • @ezramammo3056
    @ezramammo3056 ปีที่แล้ว

    Can you please make a full course on node js please

  • @salmajahan5834
    @salmajahan5834 9 หลายเดือนก่อน

    How can I make it appear from the top? Thanks

    • @marina-__-
      @marina-__- 3 หลายเดือนก่อน

      .sidebar {
      transition: translate var(--animation-timing);
      translate: 0 -100%;
      i think

  • @guillermomazzari8320
    @guillermomazzari8320 6 หลายเดือนก่อน

    Thank you so much!

  • @Greediium
    @Greediium ปีที่แล้ว +2

    Broski's Your a vscode Demon, would it be possible for you to make a video or a cheatsheet on all the key combinations you use to code? Great tutorial! Hope you're having a nice day!

  • @redaelgountari
    @redaelgountari ปีที่แล้ว

    thank you so much for this great video

  • @jawad_youtube
    @jawad_youtube ปีที่แล้ว

    I needed this 1year ago

  • @chinmayghule8272
    @chinmayghule8272 ปีที่แล้ว

    Another thing we can do is to make this a web component. That way we can use it in any project.

  • @gurvirbaraich2028
    @gurvirbaraich2028 ปีที่แล้ว

    Seeing after 5 seconds of upload

  • @ashwinsuryawanshi
    @ashwinsuryawanshi ปีที่แล้ว

    Waiting for your video on React Fiber.

  • @valleeth
    @valleeth ปีที่แล้ว

    Issue on Firefox 110, but great work.

  • @wolandsmachine
    @wolandsmachine ปีที่แล้ว +2

    great lesson, but shame,for some reason this code doesn't work in Firefox.

    • @ErikHansenDrums
      @ErikHansenDrums ปีที่แล้ว +1

      :has isn't supported in firefox still

  • @phoenix-kf3tr
    @phoenix-kf3tr ปีที่แล้ว

    Hello Kyle. I bought your course sometime ago. And now I decided to look at it again, but forgot the password. The problem is when I try to reset the password nothing happens. Can you help me with this issue? Thank you in advance)

  • @geoffreyjohn2330
    @geoffreyjohn2330 10 หลายเดือนก่อน

    very nice video but my has tag is not working, which you're are using 12.30min

  • @Juppieboy
    @Juppieboy 9 หลายเดือนก่อน

    Hiii!!! newbie question here ( real noob no joke) i made this hamburger menu, but now i cant put stuff in middle of the page :( anyway to fix?

  • @erice.3892
    @erice.3892 ปีที่แล้ว

    the CSS wizard

  • @devbyveritech
    @devbyveritech ปีที่แล้ว

    I'm becoming a web designer tomorrow.
    They don't go through this stress

  • @delfinobenavidesii4487
    @delfinobenavidesii4487 10 หลายเดือนก่อน

    Challenge: Can you recreate this in a HTA application (css3 compatibility)?
    Might have to use additional coding.

  • @suti1979
    @suti1979 ปีที่แล้ว

    Gread video, but it seems it's not working with firefox... probably, the bco the :has property.... :(

  • @mauro21523
    @mauro21523 ปีที่แล้ว

    Codegrid 🤪, but of course the best one to explain it

  • @vuongal1658
    @vuongal1658 ปีที่แล้ว

    Thank you so much🤩🤩

  • @angrybadger6761
    @angrybadger6761 ปีที่แล้ว

    I am redesigning my website and this has appeared. Excuse me if you hear the sound of java script being ripped out and given a through beating into the rice fields. You are the css Ninja my friend and I'm off to play this game as my java script skills are lacking so I have to depend on others, which I don't like to do. Many thanks for this.

  • @brunosuperman
    @brunosuperman ปีที่แล้ว

    Thank you!

  • @dheerajy2202
    @dheerajy2202 ปีที่แล้ว

    Thanks Kyle

  • @c1zztm450
    @c1zztm450 ปีที่แล้ว

    awesome! ty

  • @devoniy2793
    @devoniy2793 ปีที่แล้ว

    This doesnt work on firefox and safari browsers.

  • @jodelleandrea
    @jodelleandrea ปีที่แล้ว

    Mon CSS ne donne pas

  • @khalilbenmeziane8836
    @khalilbenmeziane8836 ปีที่แล้ว

    thank you kyle

  • @AndyMorrisArt
    @AndyMorrisArt ปีที่แล้ว

    Genius!

  • @altheometrix
    @altheometrix 4 หลายเดือนก่อน

    Asians will find the math part easy than keeping track of how we're connecting