title: overlay button menu javascript
body: <p>I have a menu button "start". when I click on start, an overlay menu drops down with two circular buttons:
  Fruits and veggies</p>
  
  <p>Now, I want to click fruits and have the fruits and veggie button disappear and about 9 buttons appear on the overlay for 9 differnt fruits.. </p>
  
  <p>how would I do that?</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-js lang-js prettyprint-override"><code>/* Open when someone clicks on the span element */
  function openNav() {
    document.getElementById("myNav").style.height = "100%";
  
  }
  
  
  /* Close when someone clicks on the "x" symbol inside the overlay */
  function closeNav() {
    document.getElementById("myNav").style.height = "0%";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="myNav" class="overlay"&gt;
    &lt;!-- Button to close the overlay navigation --&gt;
    &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
  
    &lt;!-- Overlay content --&gt;
    &lt;div class="overlay-content"&gt;
      &lt;button class="btn btn-circle overlay-icon" onclick='openNavTwo()'&gt;Fruits&lt;/button&gt;
      &lt;div id="innerNav" class="overlay"&gt;
        &lt;button class="btn btn-circle overlay-icon"&gt;Apple&lt;/button&gt;
        &lt;button class="btn btn-circle overlay-icon"&gt;Apple&lt;/button&gt;
      &lt;/div&gt;
      &lt;button class="btn btn-circle overlay-icon" onclick=''&gt;Veggies&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>