Build a Responsive Side Navigation Bar | CSS and JavaScript

An intuitive page navigation is very important for a nice user experience. Let’s see how we can easily create a responsive side navigation bar just with CSS and some JavaScript!

----------

----------

• And you should of course also follow @academind_real.

See you in the videos!

----------

[GiorgiBastos]

Thank you very much, Manu! You are very calm and didactic to teach us! As a matter of fact your way to teach is very suchlike Max's. I regard you guys as my web development mentors. I am so grateful for finding you guys!

[maskman]

Thank you so much for your reply, I think I understand how to use them, for mobile first, use min-width meaning the main css codes are for mobile size, if screen become bigger then we use min-width in media query, on the other, if we are focusing on desktop screen size, we use max-width if the screen size becomes smaller....

[husamk]

how to type faster on keyboard ??please reply, i search a lot but i can't found someone guide me to the correct way for typing for fingers and arms

[stergiosk]

This was an awesome tutorial. I hope you create more like this in the future.

[giacomorossin]

why Chrome says: Cannot read property 'addEventListener' of null
so all the js system doesn't work

[ZeeshanTamboli]

Awesome! But why not use bootstrap responsive navbar instead of applying javascript for click event?

[PeteRoCC]

Lovin this! Thanks Bro! Keepem comin!! 👍👍

[maskman]

This is an excellent tutorial!!! Sir, can you please explain the differences between max-width and min-width inside media query by making a exmaple/tutorial??? Some people use max-width, some like min-width, I am really confused!!!

[websurfer]

Max, is it worth getting ur angular course if there is angular 6 coming out or already out

[oegehiddema]

Why use a class instead of an id for the ''hamburger_button", which is a unique element (and then use getElementById in JS instead of querySelector)?

[georgesmith]

good and clear tutorial but for maximum compatibility i wouldnt use flexbox. I know it is a convenience when you want to center horizontally and vertically.

[sergi]

I was really hoping that you explained how not to hide the menu when a list item is clicked inside of the mobile menu, I think that part is a must. Otherwise the tutorial was pretty good.

[sankalpsharma]

How would you collapse the navigation list, vertically, using the TranslateY function?

[farhantubeify]

Nice one man, It is difficult to see someone except Max in Academind, But you did if perfectly. (y)

[rickfearn]

The clarity and simplicity of the java script used to show and hide the side bar is terrific. Thanks Academind! Sincerely, Rick

[ErmacMKPP]

Very Nice! Thanks a Lot.
Is Very good do the same vídeo using angular