How to create hamburger menu With HTML, CSS, & JAVASCRIPT

How to create hamburger responsive menu with HTML, CSS, JavaScript.
Code available on my blog

[kandiekane]

How do you get the bars to disappear, instead of staying there once it gets to a larger viewport, and disappearing when it gets to a smaller viewport?

I will have to play with the media queries, but I dont 2 menus displayed at the same time.

[jaski]

Thank you so much for this. I was struggling with my first web design where I implemented a hamburger menu. I have a question though regarding the toggle. If I want the menu to close when the user click outside the menu, how would that work? I believe it would require the use of removing the class, but I am very new in JS and do not know the syntax for it

[josephbeatty]

I was struggling with the hamburger method. After this explination i believe i will get it working. Thank you

[MohamedGamal]

please, If I want to place an image and make it move with sidebar menus using HTML, CSS and JavaScript, what should I add to the javascript code?


<script>
function myFnc(e){
var elem = document.getElementById("navID"),
style = window.getComputedStyle(elem),
top =

if(top == "0px"){
elem.style.right = "-270px";
}else{
elem.style.right= "0px";
}

}
</script>

[Tgpickmeup]

In the explanatory code, you did NOT HAVE "mainMenu toggleCls, " BUT in you console you showed us "mainMenu toggleCls, " SO WHY ARE YOU LYING ON YOUR VIDEO HERE??? I CAUGHT YOU...