Menu Hambúrguer

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {

margin: 0;

padding: 0;

font-family: Arial, sans-serif;

}

header {

background-color: #333;

color: #fff;

padding: 10px;

display: flex;

justify-content: space-between;

align-items: center;

}

nav {

display: flex;

background-color: #f2f2f2;

padding: 10px;

flex-direction: column;

align-items: center;

}

nav a {

color: #333;

margin: 10px;

font-size: 20px;

text-decoration: none;

}

.menu {

display: none;

flex-direction: column;

align-items: center;

margin-top: 10px;

}

.menu div {

width: 30px;

height: 4px;

background-color: #fff;

margin: 3px 0;

}

@media screen and (max-width: 768px) {

nav {

display: flex;

}

.menu {

display: flex;

}

}

</style>

</head>

<body>

<header>

<h1>Meu Site</h1>

<div class="menu" onclick="toggleMenu()">

<div></div>

<div></div>

<div></div>

</div>

<nav id="nav">

<a href="#">Home</a>

<a href="#">Sobre</a>

<a href="#">Contato</a>

</nav>

</header>



<div>

<h2>Artigo 1</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae magna risus. Praesent auctor arcu quis justo porttitor, eget ullamcorper felis varius. Sed tincidunt, felis vel hendrerit pretium, lacus metus interdum diam, non finibus nulla elit sed elit.</p>

</div>

<div>

<h2>Artigo 2</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae magna risus. Praesent auctor arcu quis justo porttitor, eget ullamcorper felis varius. Sed tincidunt, felis vel hendrerit pretium, lacus metus interdum diam, non finibus nulla elit sed elit.</p>

</div>

<div>

<h2>Artigo 3</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae magna risus. Praesent auctor arcu quis justo porttitor, eget ullamcorper felis varius. Sed tincidunt, felis vel hendrerit pretium, lacus metus interdum diam, non finibus nulla elit sed elit.</p>

</div>

<div>

<h2>Artigo 4</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae magna risus. Praesent auctor arcu quis justo porttitor, eget ullamcorper felis varius. Sed tincidunt, felis vel hendrerit pretium, lacus metus interdum diam, non finibus nulla elit sed elit.</p>

</div>



<script>

function toggleMenu() {

var nav = document.getElementById("nav");

if (nav.style.display === "flex") {

nav.style.display = "none";

} else {

nav.style.display = "flex";

}

}

</script>

</body>

</html>