Animated Hamburger Icon, Mobile Menu & Responsive Navbar with Tailwind CSS

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

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

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

    Adding an animated hamburger menu icon and responsive mobile menu is often the most challenging aspect of creating a basic website. In this tutorial, we look at how to do create both animated hamburger menu icon and responsive mobile menu with Tailwind CSS to complete our Acme Rockets website project. If you are just getting started with Tailwind CSS, I recommend going to the beginning of this playlist: th-cam.com/play/PL0Zuz27SZ-6M8znNpim8dRiICRrP5HPft.html

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

    Sir, I will not forget your words (keep striving for progress over perfection and a little progress everyday will go go a very long way.) Thanks you very much indeed, Sir.🥰

  • @stroiman.development
    @stroiman.development 5 หลายเดือนก่อน

    That was just awesome, thanks a lot mate. Been a web developer for, I don't know how long. Developer in total for 25+ years. Needed to rebuild my own web site, and found that to be an excellent reason to get a grasp of tailwind now that it gets so much attention. Your series was everything I needed :) Know I know tailwind.

  • @big-jo89
    @big-jo89 2 ปีที่แล้ว

    Hi Dave, just a couple of notes :
    1. at 24:40 I believe you can write it like this
    2. at 30:30 I think tailwind will implicitly generate that role for us when we use after or before pseudo class

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

      Hi Ahmad. Your #1 is what the docs show. I just specified the exact location of my html and js files. Your suggestion (and the docs) also work. #2 is good to know although it doesn't hurt to explicitly provide pseudo-element content. It is better I show it in a tutorial than skip over it.

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

    This is cool, I actually did a Hamburger Menu were it spins into an X as well, however it also has a pulsing ring around the Hamburger in non clicked state, when the menu is open its translucent. Its also all CSS; the code still needs a little more work- however no JavaScript.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว

      Yes, many possibilities! I did a couple examples of CSS only in my CSS for Beginners course: th-cam.com/video/n4R2E7O-Ngo/w-d-xo.html ..and the follow up bonus chapter reverses it: th-cam.com/video/VzkWH7mJpe8/w-d-xo.html

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

    Your videos are always packed with helpful insight. By watching this one in particular, I was able to create the mobile menu I needed. Thank you Dave.

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

    For anyone who wasn't getting hamburger-btn animation to work at all:
    stop running Tailwind with 'ctrl c' in terminal and then run it again.
    For some reason both times I've tried to reference input.css file so far in this tutorial, i've had to restart Tailwind. Probably an obvious fix , but my first tailwind project, and really first time using a node.js dev environment.
    "Have you tried turning it off and on again?"

  • @98parth
    @98parth 2 ปีที่แล้ว

    Love all your lectures!!

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

    brother, i am really indebt on you. thanks for giving us such content.

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

    Great tutorial! specially to those devs that are focusing on UI, thanks sir!

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

    When I try to sort with prettier and check the md:hidden class it doesnt seem to do anything? I have everything set up as you have, I think.

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

    what If I would like to add a smooth animation to the menu when closing? I'm trying but cant get good results :(

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

    Sir, Thank You very much. I waiting this lesson. 🥰. You're no.1.

  • @ririyan5960
    @ririyan5960 2 ปีที่แล้ว

    Thank you for uploading this tutorial 😊

  • @bLitzKinG20
    @bLitzKinG20 2 ปีที่แล้ว

    I've learned a lot! Thank you so much!!!

  • @ahmad-murery
    @ahmad-murery 2 ปีที่แล้ว +1

    I liked the way Tailwind configurations work,
    The arbitrary values are very useful as we often need to tweak default presets a little bit,
    I hope at the end of this series that you can dedicate one or more videos just for configurations / customization,
    Still the same vanilla css/js guy for various reasons (poor memory), but if I had to choose between Bootstrap and Tailwind I'd go with the later.
    Thanks Dave 💯🚀

  • @marcindomanski5654
    @marcindomanski5654 2 ปีที่แล้ว

    33:23
    Think with semantic, not visualization. Blind person with reader will not know what this button do. I thikk that you should add text hide with css or aria-label

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

      This is a good recommendation, and I agree that an aria-label here is a good idea. A button is a semantic element but adding a hamburger icon without a label does not help a screen reader. I do advocate for a11y and you may (or may not) have watched my other tutorials where I do so.

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

    Hey dave, thanks a lot for the tutorial. I’ve been working on a navbar which has sub menus triggered on hover for a few li items and i cant seem to make it appear on mobile view.

  • @TravinskiyVladislav
    @TravinskiyVladislav 2 ปีที่แล้ว

    Thank you, Dave

  • @sonamohialdin3376
    @sonamohialdin3376 2 ปีที่แล้ว

    Amazing tutorial thank you very much

  • @My.Daisy.
    @My.Daisy. 26 วันที่ผ่านมา

    hey sir, i can't apply the prettier. after run the command 'npx prettier --write ./build/*html' it said that the file unchanged. how can i fix it?

    • @My.Daisy.
      @My.Daisy. 26 วันที่ผ่านมา

      oh. i have resolved it by adding the .prettierc file. thanks a lot.

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

    @DaveGrayTeachesCode - Great Tut! Thanks!!
    General Questions - Still uncertain why some code goes in either input.css / main.js / tailwind.config.js / directly in html.
    For example - I wouldn't be able to realize on my own that .toggle-btn { @apply ... } should exist in input.css . I'd probably try to jam it in main.js or config.js, but I'm still too much a novice to work backward to answer this one myself(If it didn't work, there could be 1,000 reasons why, lol.)
    Could the essence of that code functionality exist in a different file?
    In general, how do we know when to reference input.css? ( I have the vague feeling that the things in input.css are more "css-ish" than what should go in main.js, but tailwind.config.js seems it could be just as intuitive a destination for me at this point.)

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

    sometimes you forget to scroll for more space to move the working area to the middle and then write code - you simply write code down there, which is really a discomfort to follow since youtube video navigation covers the code on pause! Otherwise, I like your videos - they are great!

  • @HeinHtet-xp3zw
    @HeinHtet-xp3zw 7 หลายเดือนก่อน

    thanks a lot Sir..

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

    hi Dave, I add [&>div]:rotate-[720deg] for the hamburger menu rotation animation but seem is not working? do you know why?

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

      Impossible for me to know about your code from here. Please compare it to the code I provide in the course resources.

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

      @@DaveGrayTeachesCode okok thanks for replying🙏

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

      I doubled check all the code but the toggle-btn [&>div]:rotate-[720deg] is still not working.

  • @craigburton4447
    @craigburton4447 2 ปีที่แล้ว

    Could you share the reasoning for referencing the JS folder in the tailwing.config? I saw another tutorial where the js was just in the build folder with no config reference and it worked. I tried it myself yesterday and it worked ok. Are there problems that may arise if we don't opoint tailwind to the JS folder?

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

      Yes, I had hoped that I explained it clearly in the video. Tailwind needs to know the "contents" that it should scan. As I said in the video, if a class is being applied by Javascript that is not inside the HTML files, Tailwind will not know to add that class to the compiled "style.css" file unless you also have it scan the Javascript. Tailwind only includes the classes that it knows you are using. I hope this helps.

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

    Hi Dave,
    thank you very much for this great tutorial, one question: is it a good practice to use both pure css file as well as tailwind, cause I think animation is much easier using traditional css

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

      No, that is not good practice. If your team uses Tailwind, you need to stick with that. After you learn how to apply your own custom classes and animations with Tailwind, it is not going to slow you down.

  • @Sky-yy
    @Sky-yy 2 ปีที่แล้ว

    How long this tailwind css series gonna be?

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

      Almost complete.

    • @Sky-yy
      @Sky-yy 2 ปีที่แล้ว

      @@DaveGrayTeachesCode since you suggested me in previous video comment section, that i should watch the whole series to get better at tailwind css, I watched it whole, and code along.
      What's the next effective step to build on own?

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

      @@Sky-yy I suggest taking a project you have and converting it to Tailwind next.

    • @Sky-yy
      @Sky-yy 2 ปีที่แล้ว

      @@DaveGrayTeachesCode thanks Dave, will do that.

  • @danhao6975
    @danhao6975 2 ปีที่แล้ว

    Can you share some Vue3 projects

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

    why don't you just use an ID and add that before stuff in css it would be easier

  • @jamshid5995
    @jamshid5995 2 ปีที่แล้ว

    Thanks Bro

  • @Sarrangaming
    @Sarrangaming 2 ปีที่แล้ว

    Thanks sir

  • @yassinrass7730
    @yassinrass7730 2 ปีที่แล้ว

    Hi Dave , amazing as usual i would like to share this nice VC extension named inline fold it helps you hide/show your tailwind classes, happy hacking 🥳

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว

      Yes, a great extension that was introduced in Lesson 1 of this series. I prefer to show all classes during the tutorials though. Thanks!

  • @BneiAnusim
    @BneiAnusim 2 ปีที่แล้ว

    Hey Dave, I have an issue, can't figure out how to control the size of the HTML entities. I have text-3xl but is not working for me! 😕 Thanks, this is good stuff! 😉

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว

      You can control the font-size of html entities like any other text. If in the ::before or ::after pseudo-classes, you will need to set it there.

    • @BneiAnusim
      @BneiAnusim 2 ปีที่แล้ว

      @@DaveGrayTeachesCode My mistake! I forgot to set up a bigger fontSize in the config. Thanks.