Responsive Hamburger menu React and styled-components
HTML-код
- Опубликовано: 18 апр 2020
- HELPIn this tutorial, we will be building a Responsive Hamburger Menu using REACT and STYLED-COMPONENTS from scratch with create-react-app. After creating the react app, install styled components and delete the unwanted files that come with create-react-app, and add a components directory inside the src folder. The components folder is going to hold our navigation bar components consisting of Burger, RightNav, and Navbar.
Check out the blog post here: awadieudonne.com/blog/How-to-...
Check OUT other React tutorials:
▶️ • React Tutorials
_______________________________________
SOURCE CODE:
github.com/dieudonneAwa/respo...
___________________________________________
🙏 PLEASE SUBSCRIBE FOR MORE VIDEOS 👇
bit.ly/3cIb4er
____________________________________________
🔮OTHER VIDEOS YOU MIGHT LIKE👇👇
▶️ How to create React App from Scratch: • How to setup React app...
▶️Create Sequelize Migration and Association: • Create Sequelize Migra...
▶️How to create an animated modal in reactjs: • How to create a nicely...
▶️ How to render a list of todo objects in Reactjs: • Render a list of task ...
▶️How to setup sequelize and postgres: • How to setup Sequelize...
▶️Password Reset using SendGrid: • Password Reset using S...
▶️ CRUD Operations with sequelize: • CRUD operations with S...
____________________________________________
HELPFUL RESOURCES
Certified ScrumMaster Training: Get $200 off Today! Use this code SCRUM200
click.linksynergy.com/fs-bin/...
$2,760 in Savings: Premium PMP Exam Prep Boot Camp! Get everything you need to pass & enhance your skills
click.linksynergy.com/fs-bin/...
Follow me on Social Media:
Facebook: profile.php?...
Twitter: awadieudone?s=09
GitHub: github.com/dieudonneAwa
Personal Blog: awadieudonne.com/
_________________________________
KEYWORDS:
How to create Responsive Hamburger Menu,
Responsive Hamburger Menu js,
Responsive create Hamburger Menu,
Responsive Hamburger Menu CSS,
Responsive Hamburger Menu NavBar,
Hamburger Menu CSS,
responsive menu, react hooks, reactjs tutorial, hamburger menu react, hamburger menu reactjs, hamburger menu javascript, styled components, responsive navigation menu, react js for beginners, how to create a navigation bar, how to create a navbar, how to create a hamburger menu, How to create Responsive Hamburger Menu, Responsive Hamburger Menu js, Responsive create Hamburger Menu, Responsive Hamburger Menu CSS, Responsive Hamburger Menu NavBar, reactJS styled component, Hamburger Menu in the responsive navigation bar,
reactJS styled component,
#reactJS #navbar #webDevelopment #hamburger #styled-components #HamburgerMenu #HamburgerMenuJs 
Наука
![Dimension 20: Never Stop Blowing Up Trailer [Dropout Exclusive Series]](http://i.ytimg.com/vi/xYeXpbHnGEM/mqdefault.jpg)
![Rich Dunk (Ft. DaBaby) - BIG DAWG [Official Video]](http://i.ytimg.com/vi/Pz2ewsSKAEM/mqdefault.jpg)
Honestly, such a good content! The only complain I've got is related to the sound quality but other than that, You are amazing!
I was banging my head here and there looking for a good solution and then found this video and just used the code. Just loved it.
Hi @Muhammad,
Thank you too for watching the video. Don't forget to subscribe for more interesting videos that will be coming up in the future.
I went through quite a number of videos that couldn't help me, until i stumbled upon yours. Thank you so much for sharing your knowledge.
You're welcome Toyosi
@@fullstackmastery Could you kindly tell me what CSS property I'd apply if I want the hamburger to slide to the left, above the left edge of the open menu (when it's open)? Thanks so much.
Don't know how I found your channel, but I'm damn glad I did. This tutorial is a huge help!
Hi @GarmrZero13
I'm happy I could help you through this video.
Thanks for watching and don't forget to subscribe to the channel if you have not done that already.
Thanks a ton!! Was finiding a responsive navbar over the net for hours and got your repo from github and it is really good 👍
You're welcome @Tanishq Singh Anand
Amazing, simple amazing, a code quality and simplicity to make something good, fast and beautiful, i was trying to make something like that with styled components but i failed, thank you for the content !!! Help me a lot !!!
You're welcome @Matheus
thank u bro yesterday I spend hours trying to adapt my javascript animation into react and this video helps a lot
You're welcome bro,
I am very glad the video could help.🙌
Good, ive been looking for this solution for days. Thanks bro.
You're welcome bro.
I'm very happy you find it helpful. Just make sure you don't forget to subscribe because more interesting videos will be coming up soon.💪💪💪
thank you very much for this solution!! it took me some time because i'm new to react styled-component but it work great!
Thank you too for watching, I hope you share with friends too.
Thank you for sharing! I really like your implementation and coding style.
Thanks. Glad you find it helpful. Please remember to subscribe and share with friends.
Great video! Helped me a lot in a project!
This is great! Thank you so much. Really glad you made this video!
Hi Lee
I am also glad you find it helpful
Thanks for watching
Really awesome tutorial mate! Thanks for sharing knowledge
You're welcome
Thank you so much - the tutorial was great
You're welcome @Younes Sheikhlar
Awesome!!! you really help me!! I was searching how to create a toggle menu and this is great!!
I learned to close the menu when some link is clicked, if this can help anybody:
1. At burger.js, on the burger function, pass the "setOpen" function to the component "RightNav":
2. At RightNav.js, on the RightNav function, receive the function and take it out from props (change the function to receive props):
const RightNav = (props) => {
const { open, setOpen } = props;
...
3. Use the received function on the links to change the state of "open":
return (
setOpen(!open)}>
Home
...
That's all, it should close the menu when a link is clicked.
Thanks for this video!!!!!
This is great! Thanks a lot!
Thanks for watching @Joseph. Don't forget to subscribe if you haven't already done so.
OMG!!!! genius!!! i've been trying to find a solution for hours!!!!!! thank you!!!!
Thanks for watching@@NA-ex9xk
I really don't get what your code here is doing... or why it works... but it saved my project. Thank you so much!
This was very helpful for my project. Thank you.
You're welcome @JumpPanda
I'm glad it was helpful.
Thanks for watching the video
Just what I needed! great stuff man, keep it up!
Thanks @Dragos Popescu
I'm in my first real job experience (as a voluntary tho), and I literally had to do this exact same thing. Thanks
I'm very happy to know I could help.
Thank you for wonderful tutorial!
You're welcome Andrew
Thank you so much:) amazing tutorial
You're welcome Gera
Just what i needed, Thank you!!!
You're welcome @Wahab Rhaman.
I will be uploading an update for this tutorial this weekend, so don't forget to subscribe to get it too.
Very good my man, implementing this solution right now. Thanks a lot!
You're welcome @Codename Unknown
I'm glad you find it helpful.
Thank you! This was very helpful!
You're welcome Mandi
Thank you Sir ..... This is awesome, I have just started using react...You helped a lot here.
You're welcome @Ramasindi Thalu
I'm very happy to help. Don't forget to like share and subscribe if you haven't done that already. I will be uploading more interesting videos very soon.
Thanks
@@fullstackmastery I've already did Sir, I'll be looking forward to the next videos.... Could you please incorporate firebase as well in next videos?
I would love to, but I'm not very good with firebase. However, I will will have that in mind.
Thanks again
@@fullstackmastery Thanks again 🙂🙂🙂🙂🙂🙂
Excellent video...although I attempted to incorporate your code into a pre-existing react program. Although all seems to be working (Auth0, ReactBrowser, and the navigation)...sadly it seems I have no control over the menu li colors or underline (despite trying text-decoration: none. Very frustrating as I can't seem to exercise any control over menu color or background. Any thoughts?
Really nice guide, THANKS BRO
You're welcome mate. Thanks for watching.
Thank you ! bro.
you helped me! thank you!
You're welcome @Pedro
cool, thank you!
ASMR coding awesome! Thanks!
Thanks for watching @bebe
Thank you for the useful video!
Here is the way to write a little bit easier to read block of conditional styled-component (instead of getting the parameter in each line):
import styled, { css } from 'styled-components'
...
const StyledBurger = styled.div`
...
div {
...
${({ isToggled }) => css`
&:nth-child(1) {
transform: ${isToggled ? 'rotate(45deg)' : 'rotate(0deg)'};
}
&:nth-child(2) {
transform: ${isToggled ? 'translateX(100%)' : 'translateX(0)'};
opacity: ${isToggled ? 0 : 1};
}
&:nth-child(3) {
transform: ${isToggled ? 'rotate(-45deg)' : 'rotate(0deg)'};
}
`};
}
`
Thank you!!
I wonder what is the purpose of flex-flow: row nowrap, which doesn't seem to affect anything, thank you.
thanks so much, dude
You're welcome
Good!
but how could the toogle state change when clicking on a link?
Great. good job. I already subscribed. Thanks
Thanks for subscribing @Diorelis Duran
This was so useful, thank you so much, I was able to implement it well within my code
You're welcome
@@fullstackmastery I do have a small question though, everything in the styled parts (styledBurger etc), everything within the backticks are coming up as orange instead of how it would in css or scss files...any ideas why...?
it all works though
@@sobiah11 you need to install the extension for it to get the syntax highlighting. I don't remember the name of the extension, but you can check it out if you're using vs code
@@fullstackmastery oh ok, I’ll try digging around, I mean I have prettier but this would need another extension I think
it works properly in my navbar but i have a issue how do i close hamburger menu when someone click in menu link item
Well that was a nice surprise! dude I really like the way you have no fluff and just show what to do, but you do need to sort that audio out though. great work!
Thanks for the feedback @Danny Roberts.
It's highly noted.
Thank you 🙂
You're welcome
thank u so much, wonderful tutorial :). And also I subscribed to your channel now xD.
Hi @Preetham,
Thanks for subscribing to the channel. Very interesting videos will be coming up soon. I'm very glad you find this wonderful. :)
Very helpful 👌
I'm glad it was helpful @Murilo Kronbauer
Thanks for watching
Thanks alot.
You're welcome @Patrick
And thanks for watching.
Thank you
You're welcome @Narek
I always thought it was a big no no having all your styles inside of a const like that or is this a normal thing to do now
Gracias amigo esto me ayudara a crear mi blog personal en gatsbyjs
Hola @CodeBlez
Me alegra que este video te sea útil. Más videos interesantes aparecerán pronto. También puedes comenzar compartiendo con amigos 😇😇😇
thanks a lot bro
You're welcome bro.
this is awesome bro thanks heaps, have subscribed!!
Thanks bro. Happy to have you around.💪
@@fullstackmastery hey bro sorry one question, when it hits the media query, the RightNav appears for 1 second and then slides back out. any idea why this is happening and how to prevent it? i've copied the source code from your github, i think it also happens in your vid at the end after 25:20 :( any help would be appreciated thank you!
@@UniTz You can achieve that by having separate components; the side bar for small screens and the menu for big screens. The side bar should have a display of none when the screen is large.
You can turn it to display block when it is on small screen, and add the translate effect.
However, I will be uploading an updated version for this video, where I will fix this bug. I will do that most probably this weekend as I am busy throughout the week
FullStack Mastery ok will give it a go
thanks heaps for the quick response looking forward to the vid!
hello good night friend, thank you very much for sharing your knowledge with the community, excellent material because I am wanting to escape from the framework and work only with styled-components, because I will have more flexibility.
thank you very much
heavy metal, coffee and code
Hi @JR Dev,
You're welcome and thanks for watching the video.
I found it really helpful, I would be great if you could emphasize on making your audio quality better, it's not a big deal tbh but It would help with the views as it would make it easier for most people to follow. Thank you really helpful ❤
Thanks for finding it helpful. I will work more on audio quality in the upcoming videos.
bro this is great, you just helped me solve a problem, I sub to your channel, wow great lesson
Thanks bro.
FullStack Mastery I saw your contact, do you mind if I reach out
Yeah no problem
I'm least busy on weekends
thanks bro
You're welcome
You are amazing...
Thanks Ted
Your video is just what I wanted.! The video is good. If you wanted to improve it, I suggest you taking care of the sound! And maybe talking more energetically...?
Just an opinion.
thanks
Hi @Lucio
I am glad you find the video helpful and thanks for the feedback, I will work on it in upcoming videos.
Thanks 👍🏽
You are welcome sir
Don't forget to subscribe for more Tutorial videos
Thank you sensacional
You're very welcome @Ricardo Barbosa
Is building navBar with material-UI is better compared to this? Or both work's same and either are used in industry
I think it's a matter of choice and implementation
Thnx bro
You're welcome bro
Thank you and Nice Video!!....how does your styled component give you option to auto fill like in regular Css ..mine is all in orange text...helps with spelling mistake.
Thanks for watching @YAYarea 510
I used a vs code extension to help with highlighting. The name of the extension is: vscode-styled-components
@@fullstackmastery Thank you ....that will be really helpful.
@@fullstackmastery TOP vscode-styles-components
Great video - really helpful. Do you know how can I stop the animation from happening when reducing screen size? For example, when I shrink my screen the animation will happen as if I am closing the navbar. Thanks in advance
I know you made this comment like 11 months ago, but for anyone else needing the answer to this, I was also trying to fix the same thing.. in my @media on the RightNav i set width: ${({ open }) => open ? '200px' : '0'}; and set the padding-left: 0
@@nelnel8849 You helped me fixing this thing, thanks! Now the Navbar doesn't appear as you shrink the screen. The only thing yet to fix is that the menu closes with animation, since now it closes without animation, i'm trying to solve with no results, but it is a minor detail.
Glad to help! 🤗
sir, i asked one question u not using class so when u go to link and click the link on navbar how to navbar closed in responsive any idea please describe
1. At burger.js, on the burger function, pass the "setOpen" function to the component "RightNav":
2. At RightNav.js, on the RightNav function, receive the function and take it out from props (change the function to receive props):
const RightNav = (props) => {
const { open, setOpen } = props;
...
3. Use the received function on the links to change the state of "open":
return (
setOpen(!open)}>
Home
...
That's all, it should close the menu when a link is clicked.
@@raulvap5780 wow great man thanks for helping I'm doing same thing but I'm not consider whole thing as a props once again thanks for replying and your explanation is tooo good
The content of my website(text and image) overlaps the open nav bar. Edit: fixed it with z-index: 1; in the RightNav.jsx
Nice one @Anto 👍
estoy en un dilema.... que recomientas style components o material UI?.... un genial tutorial!!
Hola @Tormentt0,
Gracias por mirar y estoy muy contento de que te guste el video.
En cuanto a si usar styled-components o material-ui. Preferiría styled-components. styled-components le ofrece mucha flexibilidad en comparación con material-ui. También tiene una característica muy poderosa llamada Theming con la que puede implementar fácilmente los modos día / noche.
@@fullstackmastery ok gracias por responder... sigue creando cosas bonitas y complicadas xD
@@Tormentt0 Gracias también
P.S Does it disappear after the links are clicked? seems to be lacking in most tutorials, love the simplicity tho , thank you
You're welcome
Bro, my transitions doesn't work, do you know why? when i click on the hamburguer menu
it was a problem with my css and i had the styled components inside the stateless component
What happened to the fullstack todo list??
It ended already
I have a question. How close the menu on click on the or clicking outside the ? i realy need this . THX for your help
Hi @KosikPL
You can use react Refs to achieve that. Quickly checkout this stack overflow question.
stackoverflow.com/questions/32553158/detect-click-outside-react-component
I need to do the same functionality, did you manage to make it work?
@@dadomarr not yet,
Sorry I for taking long. I will fix it unfailingly this weekend. I'm usually very busy within the week.
Thanks for watching
@@fullstackmastery tkss
@@fullstackmastery I'm also waiting for resolution how close menu onClick on . Thanks !
Hi, I'm following your tutorial and the @media query is not working for me, any idea why this would happen? I have the same code as you except for the index.html on public folder. thank you!
Hi Julieta
How are you using it?
@@fullstackmastery Hi thank you for answering me! I just fixed it, changed the @media max-width to 1500px, i'm not sure that is right, but I could not see the burger menu with full screen on my browser
why showing styled-components not found
/src/components/Nav/Navbar.jsx
Module not found: Can't resolve 'styled-components' in 'C:\Users\GCUF\Desktop\bootcam tutorial\trading
avBar eesponsive
avbar-resonsponsive\src\components\Nav'
You probably didn't install it, you need to install it before you can use.
Anyone know how close menu on click on nav link ?
You can use react Ref to achieve that.
please can you help me?
on expanding the navbar, it covers the contents of the screen?
How to solve that issue ?
Use z-index on the navbar. Give a high value if you want it to cover the content, otherwise, give a low value.
The thing is ,I want to push all the things downwards ,so that navbar doesnt get displayed on top of other content
@@kishorbhatt6274 Sorry I don't understand what you mean by push everything downward? Are you talking about the sidebar or the navbar at the top?
I mean, when I click the burger menu,the items gets displayed over the body (like over image and some part of image gets hindered).
So how to make it not appear on top of image (in my case) ?
my side navbar is behind everything on page. how do i make it disaply over the page?
Hi @Ayushi
You need to give the side bar a z-index of about 50 or more.
@@fullstackmastery You are awesome. Worked like a charm. Thanks
@@AbhayKumarSrivastava you're welcome
I have a problem if I resize my browser window to a mobile view, the RightNav pops up for a split second but if I remove the transition, it stops, and I want the transition to be there without that problem, please how can I fix this
You should use the left and/or right css properties to do the transition.
@@fullstackmastery still not working
@@michael_ibeh is this urgent?
@@fullstackmastery not really
@@michael_ibeh I haven't worked on the solution yet. I will come up with the solution when I can and pin the link in the comment section.
Thanks! How can i use this on class component?
Hi Alex.
Thanks for watching.
Apologies for the late reply.
Yes you can do the same feature with class component.
@@fullstackmastery Thank you!
@@alexren2434 you're welcome
Don't forget to subscribe for more awesome Tutorials coming up soon.
Hi @FullStack Mastery i'm working on closing menu, when clicking outside the menu but it is not working as expected. can you help me doing so.
Thank you for this wonderfull tutorial.
Hi @ayaan,
Thanks for watching the video.
You should use react ref to do that. Set a reference to the slider wrapper, and listen for clicks out of the slider(you can do this in useEffect hook or componentDidMount),. If a click is out of the slider, you set open to false
Get more context about it here: stackoverflow.com/questions/32553158/detect-click-outside-react-component
@@fullstackmastery I used your Creating modal video for creating outside click functionality on menu. Thanks for the modal video.
@@ayaankh245 Wow that sounds awesome,
I am very happy the video video was helpful. Keep coding, and if ever you come across better ways of doing thing, please comment it on any of my video's comment sections, I'd be very glad to learn too.
@@fullstackmastery sure in just trying to implement it with style-components so that transform property remains. Thank you again!!!
how to push contents to the right when you open the hamburger menu
Hi @Eric Mathi,
Thanks for watching the video.
About your question, here is a resource where that is done: codyhouse.co/gem/full-screen-pushing-navigation?__cf_chl_captcha_tk__=23f31b1b990dc5f8fee20bdd357d3e235394dc4a-1594881204-0-Afk6O8Pw1FmfCJeKMZGSkVIididvleDdGtBTB2DCLowtZOvXlU5-J7YXOeXEVaRWrF6L9xHh1PRLkEt4Gcx8vaEvE6wq_KHPCmEE4Jj_A4J3RK2UZmfwnEVvl0YTn5YmBAy76OayTZ5RoFTz9ZjmC1b9tx7GuhdNKDx-TXCeVsdlJ_0b2JOtatQcFhA5sKfwUpCgtz6FYtKp8DqF7xfmvBGhjzZ36cykB0iKK0Ck_p6snUhDPrrcDhpFVywDcrZIhZ2ywox8kmWVpRs9uh5Vx50fCxfag3ZhVWV4PeS02Fv9SX24JJoRxhp6mOxGheRkIdPEmXvvODCNGHc0m2D6AcDM9i0qIBw0_b77T6UbEmfx7gcgGrFjlNY78eXOZn06VnhZxtCTwjUsGBsVZPgYmiV5npjSVa8d3v_6gfKt5hZGNhJjNT0zEibZGa_x80CqaYryHHakty2ZeJOzR_61iC6j1_NdpPpn2XVLD09dDHdKSNlVU9jl-s-CZMk9839dLyHM-oEqh9h_F96cXZu2HnbEd6A88lL_iOkPxMxFNzQI
@@fullstackmastery Thanks
It works really nice but the animation is a little choppy. When I open the hamburger menu I notice some jiggliness on the bottom part. No big deal but I wish the animation was smoother.
Hi @surfinbird71.
Thanks for watching the video. A better update will be coming up soon, and I will handle the jiggleness in it. So make sure to subscribe if you haven't done it yet.
Thanks
good content, but the audio needs improvement
Error
Good tut. please work on your audio and especially your keyboard; it's too loud 🙈
Thanks for the feedback.
I will work on it in the next videos
I have no clue what you're saying. But I followed visually...
Thanks for watching @HighZenBurger
Don't forget to subscribe for more helpful videos and I promise to be clearer next time.
Awesome video but speak a little louder and clear man!
Hi @Kunal
Thanks for watching. I will work on the voice in up coming videos.
The audio on this video is terrible. Otherwise good work.
Hi @AndrianMMable
Thanks for your feedback, I will work on the audio in the upcoming videos
Is this coding ASMR?
please get a better mic, it's a good tutorial but all I can hear is static in the background.
Thanks for watching. I will work on the quality
@@fullstackmastery good luck
WHAT?! I CAN'T HEAR YOU. SPEAK UP PLEASE