Pure CSS Hamburger Menu & Overlay
Vložit
- čas přidán 7. 09. 2024
- In this video we will create a landing page with a pure CSS responsive hamburger menu (No JavaScript) with a bit of animation using CSS transitions.
CSS Starts - 6:27
Menu CSS Starts - 15:40
Sponsor: Freelancer Bundle (Use "brad25" for 25% off)
studywebdevelo...
Code:
codepen.io/bra...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Modern HTML & CSS From The Beginning:
www.udemy.com/...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia
Just as I started thinking I was beginning to master css... then I see this video and find how much more there is to know.
Thanks for keeping me humble.
yeah right
every body is first
Thanks brad....genius as always...
You helped me a lot. I was able to create and manage my own website. Thanks to you, man. Have a great day whoever is reading this.
hi smoking....):
That's what I love about your teaching style, that you start from scratch and build up the project 🙏
Wow, fantastic! Coded along with you again and love how this turned out. Such a creative solution to use the check box and its checked state to control the visibility of the menu
Awesome!! I love the fact that you give a rationale for each css property that you decide to go with. Super-helpful.
After some project development heavily relying on javascript functionality, I was racking my brains trying to revert to a clean and strictly minimalist approach to implementing a responsive navigation menu, an approach that at best should eliminate the necessity of Javascript usage altogether. ...gave up and eventually started cobbling together some code when I noticed a new video on this channel that I merely wanted to watch to distract myself a little - and BOOM!
That checkbox solution is simple. Clean. And BRILLIANT. Why did I not come up with this?
Haven't been missing any of your videos lately, a BIG thanks for continuously creating and sharing such high quality content!
one of the best instructor I've ever seen! Thanks Brad for giving us this quality content!
Me: I already know how to do it. Also me: watches the entire add before the video, leaves a like, lets video play in the background to ensure Brad will get paid.
Is that how it works?
@@EdmundAlynJones yeah, the user's gotta watch an ad or watch the video for a certain time i think not sure
and the oscar of best developer and teacher ever goes to 'Brad Traversery' love from Egypt ..
This is incredible! Thank you so much for such a high quality tutorial. I've followed along and made my own hamburger menu and am absolutely thrilled with it! Liked and subscribed!
Extremely useful lesson, I've learned a lot about creating a hamburger menu, transitions, animation and buncha other stuff. Thank u so much brad, sending love from Egypt!
somebody who actually explains his coding properly... Very good video, thanks for the help.
Thank you so much! This is definitely going to help me 'wow' my professor for my final project this semester!
One of the best tutorials out there on internet. Thanks Brad. Loads of love
Just waw .. You're very objective in the way you make videos , not too fast , not too slow. Having courses on mostly every thing, bringing useful tips and advices every now and then. I Hope you keep this channel up !
*crazy that you can do that with just css!*
css can do anything it's just bootstrap make life easy xD
CSS is made for This bro
I can make Advanced Web Illustration with CSS
I recommend to Check out the Channel 'Online Tutorial', for THE most amazing speechless Web Illustration
Yep! Beautiful isn’t it? It’s possible to do it just with css, in this case at least, because of the checkbox input. The entire menu relies on that. Brad’s cleverness really shows when he added padding to the hamburger container. That way you didn’t have to guess where to click to get it to work because with enough padding you can click anywhere on the hamburger. Good shit Brad! “Now get me those kha-kis so I can get warm it up. It’s freezin out heaa!”
starting from scratch... love it dude...it helps me understand and gives me practice on what is needed to start a project, I understand its second nature to you, and i appreciate it more when you go thru , what may seem tedious to do, i started last year learning the ins and outs of being a full stack developer, and what looks confusing as hell to others, makes so much more sense to me now.
Great tutorial! Thank you.
By the way, I wonder are the clickable? I made a burger menu by watching this video but they're not even selectable as if you wanted to select text.
From udemy course 😂😂✌ keep going brother 💓💓
CSS now a beast on it's own, still can't believe no JavaScript was used excellent tutorial. Thanks
Brad u are the best there is. I find it hard to follow other tutorial channels. U have truly spoilt them for me
Amazing tutorial
Only issue was not being able to inspect anything within the showcase (main-body) class because the menu and menu-wrap classes are positioned above them. Solved this by simply adding this to the css and can now inspect everything below the nav menu header:
.menu-wrap, .menu {
height:60px;
}
Loved this workaround though!
It would be helpful if you could split the windows in VS code so that we could see what HTML elements you are targeting in your styles. This would be helpful for those like me who aren't necessary writing it down line by line but more following along visually as a way to compare and understand your approach and it makes for a more efficient way of way of studying the content without taking away from those who need to follow along line by line. Thanks.
Exactly
I never considered using an input field to add state for CSS selectors! Fantastic idea!
Dude, I am learning SOOO much just by following along with your tutorials! Thanks for all these. I'll get one of your Udemy's courses really soon, probably that 50 projects in 50 days one.
This is amazing, such simplicity every time you code. Thank you very much.
I love this. The design is amazing and the idea is genius. Thanks for such a great tutorial.
I wasn't getting any good video on overlay! But this video solved that problem to😊 Thankyou so much:D
Awesome video super helpful even after 3 years of creating this content, I was easily able to implement this code with sass.
Thanks brad big fan of your work. Learned HTML CSS and Javascript from reading online and of course from watching your videos. More power.
I am impressed by the simplicity . Thanks Brad
First of all, amazing video!
I tried to implement this css/html only visibility toggle method but I just failed. Gave up and went for an easy and quick JS solution.
Anyway, I'm sure I'll get how that works someday.
Still useful for the hamburger icon using pseudos (after/before). Gr8 stuff man
Great hamburger menu -- with no (need for) JavaScript. I noticed something though that I suspect is unintentional: The tag is not closed.
css has come such a long ways. thank you for making this training.
Thank you so much Brad for an awesome tutorial. I have a question. How do I get the menu to disappear after I click one of the menu items?
Thanks Brad, I love it. I'm using it, and dumping bootstrap. My layout file no longer needs ANY javascript for MOST pages.
It looks great everywhere I checked, except for on my old iPhone 5 on Safari. The 3 lines of the hamburger are not aligned when the menu is closed, and when it's open, it's supposed to look like an X, but it looks like a T at a 45 degree angle.
There is no 45 degree angle ANYWHERE is his code!
Nice! I will make this one that looks really nice.
Thank you for sharing!
Sir i love your straight forward serious way of teaching , very valuable content
a tip to write less code - i put reset styling for li and a tag at the beginning of stylesheet, so i wouldn't have to repeat it everytime i style elements
keep starting from scratch , it helps a lot for beginner like us.
A very big thanks🙏 for the Copious amount of knowledge you are giving to us.
Lots of love from India.🙏
This is from your udemy course, love it man
Great video. Very informative and easy to follow as well as understand. Now, we need a video showing how to add sub-menus into this menu.
Help! Struggling to make the animated menu overlay disappear when the links are clicked. Currently seems to be necessary to click the X in order to return to the background content.
Great video as always. I also figured out how to close the menu and overlay when clicking on links. Thanks again!!
how to close menu when clicked on links using css only
Jazaak Allah Khair for such an informative video.
Is there a way to have this same hamburger menu and effect where the input/ code is WCAG compliant?
Great tutorial, enjoyed it so much that i bought your course on Udemy.
Just signed up for your HTML, CSS, & SASS course on udemy. Needed a modern refresher with grid, flexbox & sass!
Hey, Thanks Brad for the video. me encanta cada vez que subes un nuevo video tocas temas importantes y super geniales ¡Está increible!
If I could like this video twice, I would!
Holy Sh*t - you just blew my mind. I had no idea CSS was this powerful
Very nice, thanks an awful lot - I've managed to incorporate this into my layout. Now how do I make the menu disappear when I click on one of the links?
Gracias Brad!! I love the way that you explains. I'm doing your course modern html css from the beginning. It's awesome!! Sorry for my english =)
since you use align-items:center and justify-content center alot you can just make a new class in html that you can use for all elements that will have these 2 css attributes and then you just write that class in css that contains only align-items:center; and justify-content:center; i'm not really sure how good i explained it but i think you get the idea. That is usually what i do atleast to avoid repeating code over and over again
really enjoy this tutorial definitely subscribing
Hi, sorry but when you click on a menu item, it remains open, how do you close it?
Thanks Brad! Amazing as always!
Just noticed that you left the code in CodePen! Thank you so much!! :D Gonna take a few styling things from there :D
Hi Brad, thanks for this, very useful. I'm trying to get the menu to disappear again when one of the menu items is pressed. The links I'm using are navigating to sections on the same html page, so the page navigates correctly under the menu, but the menu stays visible when it should disappear on tap. Any suggestions?
same problem here..
I know this video is a couple of years old, I have just one question. Once a link has been clicked, is there any way of making the menu disappear using just CSS or would JS have to come into play?
Cracking tutorial, I've purchased the course and will be looking forward to cracking through it :D
Genius in its simplicity, beautiful in its execution. Awesome sauce! 😎👍
Thank you for showing this! will be playing with this for sure over the next week!
Great tutorial. So great explanation that i bought the course in the description below
Very pleased I came across this video, this has helped me with my web design revision a lot! Subscribed already :) Thanks for posting, have a great day!
Thanks you Crack!! That's Awesome CSS!
Traversy Bhaayya Zindabad 😍✊
Brad, thanks mate for this it is awesome :D
Your work is the best to be honest and the way you explain everything is top class!
I have watched a lot of tutorials from various presenters but your work is unique.
All other video tutorials are kind of artificial, if u know what I mean but your approach is natural, when I wtch your tutorial it is like I watch some person I know and there is no acting and u put yourself on equal with others, that is how I feel when I watch your videos.
Great work mate and thank you one more time for all knowledge that you share with others.
Greetings from Ireland
Cheers mate
Super cool as always
Quick question- is there any way to have the background image stay in place if the page scrolls down? Everything looks great but I guess because the position is absolute to top 0 left 0, if I have a page where content goes below the window, when I scroll the bg image scrolls away and the gray (from primary color) fills in the background space then.
Line 44: Why can't we just use .showcase-inner? I can't think of even a future case where we use the showcase-inner class outside of a div with the class of showcase and if we did, wouldn't/shouldn't we want/expect it to work mostly the same way?
This is the first time I didn't understand Brad's video.
excellent! thank you it went fast and I'm an infrequent user of CSS but very understandable...
im really appreciate!! U very good man.I made decision, im only want to watch your channel, the other channel i dont care anymore...u are the best channel for programming i ever had in my life.
May u always in good health, u are very unic, awesome channel!! :)
Thank you for the very informative video. I have learned a lot. What can I do to after pressing the about left, for example, the menu disappears again? And I jump to the for example on in the About section?
Awesome Tutorial.
Worth spending hours practicing.
Brad, there is nobody like you.
Yes this menu is in your Udemy course Modern CSS/HTML. Will help re-enforce the learning to see it again.
Why are there *two* (child and grand-child) inside the ?
Amazing. I will try this right now
Just amazing, nothing else to say...Thank You for this tutorial :)
32:39 I'm watching this on a tiny phone screen while following along in my laptop. Just a note for the uninitiated in CSS: when he gets to this point, he's targeting the element with a tilde (~) character, not a plus sign. Prior to this, the instructor was saying what he was typing. At this point he doesn't and it's the first time he uses this syntax. It broke my code and I had to find the details in his Github. Otherwise, this was an awesome tutorial!
/* Show menu */
.menu-wrap .toggler:checked ~ .menu{
visibility: visible;
}
Awesome video Brad .
Now I gotta watch the css vids again 😁
In some aticles more correctly in case border-box use *, *:after, *:before
Thanks Brad. I got the javascript course on udemy. I think I need to sing up for more over there but I can only handle one or two courses at a time.
got your udemy course on Javascript, really good
When the Navbar List items are clicked. The Navbar and Overlay remains. Please How do I remove the Navbar and Overlay when the Navbar list items are clicked. Thank you
You are best tutor Brad...
your videos is help a lot..
keep coding brother..
Also, isn't it more taxing on the browser resources to target elements many levels down the inheritance tree than to add classes to the elements?
I want to know this too. Is it good to add a plethora of classes or use advanced selections?
I learnt enough with this video, Brad. Thanks a bunch!
Loved the video. But I'm having a problem that the z-index of the toggler means I can't click on the "Read More" button. If I change that z-index then the button shows through the menu. Any idea how to solve this?
Excellent video man you have definitely helped me develop! One thing though, the page background overlay color appears for a split second when my page is loading. Is there any way to fix this?
Thanks for your efforts! The way you teach is very awesome.
You are a God!! Thank you very much for this!!
this is a nice tutorial but i have a question, Im making a one page website and have id's on the section but when i click the nav links its goes to that section but the menu overlay stays there, how do i overcome this issue to make the menu disappear when nav link is clicked
I did this on my react app and having the same issue
@@tebogotau I used this on my react app and figured out how to handle it. I'm using react-router-dom. I created a function called handleClick and in that function, just put document.getElementById("checkbox").click(). That will change the checked state. Just give your checkbox an id of checkbox. In you links, check call onClick={handleClick}
OMG! This is so Complicated, I hope you make another Video on this,
Thanks for Your Efforts,
You Are The BEST!
My problem is the checkbox is not centered inside the hamburger box, its aligned top left.