Advanced Dropdown Menu - React & CSS Animation Tutorial for Beginners

Pretty complex to understand for a beginner like me but after understanding and being able to create similar results, I am impressed with your code. The layering of things is beyond amazing. I wish to reach where you are! Thanks !

Where can I find the code? Did you put it in your github?

Yes, this was very helpful.

your way to write css is so good can you do a css cours with your way 😊😊😊

I remember that this kind of content was what made me to subscribe. It will be cool that you take it back and let the AI rest for a while. Thanks.

Thanks for the great tutorial!

slick

this is very cool

The Nile is a river in Egypt

How would you implement this in Angular?

I fucking hate front end dev why is my company making ne do this. I want to end it all 💀💀💀

whoa!

Great video, but I'm missing the most important part... How do you display a component by clicking each navItem?

awesome

You are a super genious

Thank you ONE PUNCH JEFF for this incredible content

do you have this tutorial by HTML and CSS and Javascript?

Whats the name of the pixel font on the thumbnail

How could I make the items generic? So that there is no need to hardcode that much

Pretty sure everyone who is praising you doesnt really understand what you are doing. Not saying what you are doing is wrong, but I dont think this is beginner friendly at all. This would probably throw me off if I were to be a beginner.

Thanks a lots for your helpful work!!!

wish i had found your channel sooner, great content and most importantly you explain the vocabulary really well. Thanks for the knowledge!

forgot to code in the `rightIcon`? :)

I really recommend the 0.75 speed for this one

I didnt understand a single thing

does not work, maybe it needs updating. It doesn't work either by copying and pasting all from github

God or wut ❤

how would i do it with makestyle hook from material ui. will it be '&.menu-primary-exit':{} ?????

can you do this with NextJs

And that's how you make it reactive

Yes please !

Great video

for the life of me i couldn't find a way to pass links into the navbar dynamically
tried with props , but props collects data i'm trying to pass from all the links not only ones i clicked

I wish there were more videos of making components like this.

Dude can you slow down a lil bit? You explain exceptionally but the speed is hard to match as a beginner. Much appreciated if the speed is reconsidered!

The same for Svelte would be awesome!

How long did it take you to finish the project Sir?

Imposter syndrome.

I couldn't use those icons in a typescript react project. You didn't really even show how to import Icons into VSCode which I've never done before. Do I need to use webpack? I guess I'll just use emoji's for now.

Thanks for short and informative tutorial, keep up the good work, your are helping a lot here 😁

I never seen tutorial with 1x speed other than this... no bullishitting before and after the videos.... clear and crispy from start to end ..well done mate

CAN YOU PLEASE ADD NAVIGATION TO THIS PLEASE PLEASE PLEASE

I have a question: What would you do if you wanted to have that same dropdown menu on the left side? Thanks in advance!

adding 'style={{height: menuHeight }} ' prevents my all my dropdownitems from showing. Help?

thanks it's very helpful and efficacious🤩🤩

Isn't it possible to make it using only CSS?
Transitions, flexbox, :focus-within, some 'display: none' and it should work basically the same 🤔

Does anyone else hear talking and laughing in the background??? Am I going INSANE !!!!

How do i navigate using this navbar?

for <DropDownItem> component

function DropdownMenu() {
function DropdownItem(props) {
return (
<a href="#" className="menu-item">
{/* check if there's leftIcon to render */}
{props.leftIcon ? (
<span className="icon-button">{props.leftIcon}</span>
) : (
""
)}

{/* definitely render children */}
{props.children}

{/* check if there's rightIcon to render */}
{props.rightIcon ? (
<span className="icon-button">{props.rightIcon}</span>
) : (
""
)}
</a>
);
}

How did you use emojis in vs code & get them to show up in the browser? (backend dev here catching up on front end skills)

Any chance u can redo this in js vanilla?