Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>

  <header>
      <nav>
          <div class="btn-menu">≡</div>
          <ul>
              <li><a href="">Home</a></li>
              <li><a href="">About</a></li>
              <li><a href="">Services</a></li>
          </ul>
      </nav>
  </header>


  <script>
      
    document.querySelector('.btn-menu').addEventListener('click', function(){
        var toggle = document.querySelector('header nav ul').className = (toggle) ? '' : 'open';
    })

  </script>

  </body>

</html>

body {
  margin-top: 80px;
}

header {
  width: 100%;
}

header .btn-menu{
  background: #e5e5e5;
  direction: rtl;
  font-size: 25px;
  padding-right: 10px;
  cursor: pointer;
}

header nav ul {
  margin: 0;
  list-style-type: none;
  text-align: center;
  background-color: #1b2125;
  height: 0;
}

header nav ul.open {
  height: auto;
}

header nav li a {
  color: #fff;
}