Create a responsive menu with HTML, CSS and vanilla JavaScript (Beginner)

Publicado em: 24 Outubro 2023
no canal de: Mimsoo Studio

179

This is a beginner friendly tutorial on how to create a responsive navigation menu using HTML, CSS and vanilla JavaScript. Some of the techniques we will be using are; a combination of display grid / flex, media queries, filter in css, position fixed, the 'click' event listener in JavaScript and last but not least, the classList JS property.

Thank you for watching and please consider supporting me by giving video a thumbs up and subscribe for more content.

Grab the code here
https://codepen.io/Mimsoo/pen/oNmgdqj

Meyer reset CSS
https://meyerweb.com/eric/tools/css/r...

// Table of content //
0:00 intro
0:50 page skeleton
3:00 HTML
6:12 CSS styling
7:05 styling navbar
14:20 main content styling
15:28 navbar display fixed
16:53 hamburger menu
19:20 media queries
24:09 sub nav
28:52 JavaScript click event listener
34:30 add animation transitions
37:23 animate hamburger menu
40:07 outro

Nesta página do site você pode assistir ao vídeo on-line Create a responsive menu with HTML, CSS and vanilla JavaScript (Beginner) duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Mimsoo Studio 24 Outubro 2023, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 179 vezes e gostou 5 espectadores. Boa visualização!

749