Hello everyone! In this tutorial lets build a responsive navbar and hamburger menu using html,css and a little bit of javascript.
This is how it w...
For further actions, you may consider blocking this person and/or reporting abuse
This is a great start, but does not resolve anything about the accessibility of this menu. Two immediate things to fix would be to make the hamburger menu itself a
buttonelement (which would make it clear that it's interactive) and to add some text that labels the button in some way (which would make it meaningful to a screen reader user). 👍🏻See these examples for more detail and other fixes:
Thank u so much for the feedback and suggestions! Appreciate it. And i will surely fix it and implement your suggestions 😊
Thank you for sharing!
There's a way to do it without using JavaScript, handling the menu visibility with CSS.
If you add a
<div>containing only the hamburger button and the menu, you can use the:focus-withinCSS pseudo-selector.:focus-withinapplies to an element if it has the focus, but also if one of its children is focused.For example, if you write the HTML for the menu like this:
You can use the
:focus-withinselector like this:Now, the
<nav class="navbar">will initially remain hidden, but it will appear when any child of<div class="menu-container">is focused. For example, when you click on the hamburger button or some of the menu items.This is a cool solution i just tried out in my own code! Thanks for sharing! The only downside is once the menu is open, you have to click outside the hamburger to close it which from a user experience perspective could confuse a user for a second/ make them think your site has a bug. Unless you also have a work around to this that i am missing.
why not this about leaving it go home :) :
=== CSS ===
.show {
display: block; /* Show navbar when class 'show' is added */
}
=== JS ===
you toggle it first with showNavbar(), then :
function hideNavbar() {
const navbar = document.getElementById('navbar');
navbar.classList.remove('show');
}
const navbar = document.getElementById('navbar');
navbar.addEventListener('mouseleave', hideNavbar);
Hey thank u so much for sharing this man! Will try this
This works great in codepen, I am trying to get the js to work and I am getting:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at site.js:165
from:
hamburger.addEventListener("click", mobileMenu);
Do you know how to resolve this property null in the javascript file?
Appreciate your help in advance
Hey Ryan, I had this exact same issue, so Im gonna go ahead and guess you are using Chrome. Chrome has issues when using JS in localhost environment. To fix this, just move your js script tag to your footer, instead of your header. This fixed it for me, strange but hey...
Another solution is to add the 'defer' attribute to the script element.
Great explanation! Helped a lot!
Nice, thanks.
Thank u!
It was really helpful. The javascript code was easy to understand. As a beginner in javascript, I was really able to understand it without any help. I was even able to tweak it and modify it according to my wish.
Great explanation was helpful ! 👍🏽
Thank u !
nice
Thanks.
It was so easy to understand. Thank you for this. Bookmarked 😁
Thank u so much!
Here is the react version of this template:
codesandbox.io/s/epic-meninsky-n5zlbj
Thank you so much. I was just stuck with react implementation. Your solution worked like a charm! Thanks for posting it here. 🙌🏻
Nice tutorial! The way you divided, make very simple to understand and follow :)
Thank u!
Thanks Gaurav. Great explanations.
Thanks a lot u saved my day :DD
@gaurav This doesn't work.
Fuck yeah
How can I make it close on clicking Outside of Navbar.
Wow. I like this. Steps are so simple. I forked this on GitHub. Thanks for sharing.
Awesome article. 👏
I so much love how things are sectionized for easy understanding.
Thanks 😊 for the Tut..... It's simple and Amazing
Thank u!❤
Thanks a lot for this tut, searching like that :-)
Great tutorial!!
Thank u 😊
Awesome! 👏✌️
Thank u !
Wow!
Loved it!
Thank u!
Very Nice. Thanks
Thank u!
Yes, this is a very nice tutorial. Thank you for posting it.
Thank u!
Amazingly simple, Thanks
Thank u!
Thank you sharing. This is what I'm looking for
Thank u!❤
wow! Thanks a lot for sharing. I have practiced the same by going through this post. Well structured and few lines of codes.
Thank you so much!❤
thank you so much. You made it easy
Thank u for the feedback man!
This is great, broken down to each step so its easy to understand. Thank you! 🤓
simply perfect! just what i was looking for/thanks sir.
Nice !!!
Thank u!
Would be great to change this code to mobile first instead.
I use replit, and I followed all the steps. (I have hacker plan)
You guys work too hard ! 🤣
The drop down menu isn't working for me for some reason. I am clicking the button, but it is not displaying anything. Does anyone know how to fix this?
Thanks bro, great tutorial, easy to understand and help me a lot
Super nav bar! How did you calculate the translateY pixels you have to move in order to form a X? Thanks a lot!
Thank you, thank you, thank you! I have tried many hamburger menus. It is so frustrating for beginners.
Worked perfectly!!!
I do find this helpful, I have spent sleepless nights for weeks trying to do this on my own, thank you very much, and also thanks to the community as well.
This was a great tutorial! Thanks for sharing :-)