ReactJS Tutorial - Navbar with a Dropdown Menu! - Beginner Project Using React Hooks, Router & Icons
HTML-код
- Опубликовано: 13 авг 2021
- Hey there!
Here is a small project I did this week. Navbar with a Dropdown Menu using React Hooks, Router and Icons with complete CSS styling.
Source code: github.com/mtajammulzia/navba...
Credit for this idea goes to Brian @ / @briandesign
#react #reactjs #beginnerprojects #CSS #reactrouter #reacthooks #frontend #navbar #dropdownmenu #dropdown
It was a wonderful tutorial. I learned a lot about react router from your video. Thank You very much and highly recommending this channel. One thing to improve is sound quality...
thanks a lot, You've helped me figure out how this works
Thank you please keep continue
can u please suggest how to do it the drop down menu for product ?
Thank you so much sir
Very good video 🤙🏻
thankyou buddy!!
A good tutorial, only thing missing is making the nav menu mobile responsive
Thank you!!!😘
Muchas Gracias.
How to add transition effect to dropdown?
pages & images folder does not displaying after click on home and other buttons
Hola de Colombia, No soy desarrolador y lo hago por cultura general, soy viejo y no veo el texto del video, pero gracias y muy buena clase, gracias.
thanks biro
It's a very good project, which was much needed for learning, but it would have been even better if you had also made this Navbar and Dropdown Menu Mobile responsive...
bro hey I have some issues with routing when it's route the path is changing but I think the routed page is not rendered, do you have any idea ?
Hey there, you should check the version of react-router-dom in your package.json if it is higher than 5 than look up the new syntax, they have changed it. Or install version 5.
@@TheNoobCoder yeah bro i got it it's 5.2.0 thay u were using in the video but the current is sth 6 and I downloaded the old version and now its my nightmare 'cause i cannot use many of the features new released .d
@@furkanatak7918 Use V6 only just replace Switch with Routes and instead of component use element like this element={} and everything will work as things are working for him and one more things Switch is not working with react 18
is this a resposive menu??
This doesn't work with multiple dropdown in Navbar. Could you please help me creating multiple dropdown in same Navbar. Thank you!
change "onMouseEnter" to "onMouseOver".
@Codamy kindly add dropdowns for two menus
Kindly give the dropdown for products also. that is i need at a time two dropdowns
exactly what my problem here is, i can add one drop down but completing it for th others is a lil bit of prob
Pls make a Crush Coure React Js ❤
Can you teach me how to show in case two or three dropdown menu. Please! I try but i fail
Will surely make a new video on that.
I have the same issue@@TheNoobCoder
I don't hear you. You made a video with a too low volume of sound. But thank you for your help. Have a nice youtubing.
is it mobile responsive??
No. This video was for dropdown menu only. If you are looking for a responsive design for a navbar. Watch this: ruclips.net/video/NN3fh6bJB90/видео.html
Thanks for this video. Please like and subscribe.
AUDIO IS VEERY LOW
idk why everyone is using hard coding man we are working on react so the data should be static array of objects or coming from API so we donot need to write li item again and again just use map and diplay the data of navbar
why dont you do a video and show people how to do that
copy paste from other instructor even all code I have seen same last year, make your oqn app instead of copy and paste from other channel.
Please compare code, the idea is same but the way I implemented is different.
Nc copy from another youtuber tutorials
liar poor programmer no responsive navbar
that sucked lol
Original content : ruclips.net/video/T2MhVxJxsL0/видео.html
Please don't copy content, it's bad for community ,
appreciate ur effort ..
Please watch both videos and compare code. I didn't implement it like he did. The idea is same, implementation is different.