Menu burger | Notion

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- font -->
    <link rel="preconnect" href="<https://fonts.gstatic.com>">
    <link href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap>" rel="stylesheet">
    <title>Menu burger</title>
</head>
<body>
    <style>

/* css */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.burger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 20px;
  cursor: pointer;
}

.line {
  width: 30px;
  height: 3px;
  background-color: #121495b6;
}

.menu {
  position: fixed;
  top: 70px;
  left: -100%;
  width: 100%;
  height: 100vh;
  background-color: #121495b6;
  transition: all 0.3s ease-in-out;
}

.menu ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}

.menu li {
  margin: 20px;
  font-size: 24px;
}

.menu a {
  text-decoration: none;
  color: #fff;
  font-family: 'Montserrat', sans-serif;  

}

.show-menu {
  left: 0;
}

    </style>
 
 <!-- html -->

<header>
    <div class="burger-menu">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
    <nav class="menu">
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">À propos</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  
    <script>

// js

   const burgerMenu = document.querySelector('.burger-menu');
const menu = document.querySelector('.menu');

burgerMenu.addEventListener('click', () => {
  burgerMenu.classList.toggle('open');
  menu.classList.toggle('show-menu');
});

    </script>

</body>
</html>