title: How can I toggle menu onclick
body: <p>I'm new to JS and coding in general and just don't know how to do what I want it to do; Firstly my code (I still have to clean up my code a bit :P )</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .header {
   position: relative;
   height: 100vh;
   width: 100vw;
  }
  
  .hero-image {
    position: relative;
    background: url("../img/background-image.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100vw;
    height: 100vh;
  }
  
  .hero-text {
    text-align: center;
    color: black;
  }
  
  .hero-text button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 10px 25px;
    color: black;
    background-color: #ddd;
    text-align: center;
    cursor: pointer;
  }
  
  .hero-text button:hover {
    background-color: #555;
    color: white;
  }
  
  /* MENU */
  .header__menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: -1;
  }
  
  .hero-text {
    width: 100vw;
    height: 100vh;
  }
  
  .hero-menu_toggle {
    justify-content: center;
  
  }
  
  .hero-menu_scroll {
   justify-content: center;
  
  }
  
  .header__menu.is-expanded {
   z-index: 99;
  }
  
  .beige {
   background-color: #ffd39b;
  }
  
  .pink {
   background-color: #d0b2e4;
  }
  
  .yellow {
    background-color: #FFDE03;
  }
  
  .blue {
    background-color: #00B8D4;
  } 
  
  .green {
    background-color: #1DE9B6;
  }
  
  .black {
   background-color: #414141;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;header class="header"&gt;
    &lt;div class="hero-image"&gt;
      &lt;div class="hero-text"&gt;
        &lt;button onclick="toggleMenu" class="hero-menu_toggle" id="hero-menu-toggle"&gt;Menu&lt;/button&gt;
        &lt;h1&gt; Berlin From Below &lt;/h1&gt;
        &lt;button class="hero-menu_scroll" id="hero-menu-scroll"&gt; see more &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="header__menu"&gt;
      &lt;nav class="nav"&gt;
        &lt;ul class="menu-list"&gt;
          &lt;li class="pink menu-list_item"&gt; &lt;a href="gallery.html"&gt;Gallery&lt;/a&gt; &lt;/li&gt;
          &lt;li class="yellow menu-list_item"&gt; &lt;a href="people-of-berlin.html"&gt;People Of Berlin&lt;/a&gt; &lt;/li&gt;
          &lt;li class="blue menu-list_item"&gt; &lt;a href="contact.html"&gt;Contact&lt;/a&gt; &lt;/li&gt;
          &lt;li class="green menu-list_item"&gt; &lt;a href="news.html"&gt;News&lt;/a&gt; &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's what I want to do; 
  When the user comes to the site all he sees is a background-image and two buttons (Menu &amp; See More).</p>
  
  <ul>
  <li>If the user clicks on the menu button I want my menu to pop up and cover the entire screen, ideally with a transition effect where the colors gradually fill the screen</li>
  </ul>
  
  <p>I hope it's understandable what I want it to do.</p>