title: CSS only solution for collapsible navbar with animation sliding open/closed?
body: <p>EDIT: Code Pen example - <a href="https://codepen.io/earleyj1/pen/YjpNZK" rel="nofollow noreferrer">https://codepen.io/earleyj1/pen/YjpNZK</a> (You need to shrink the browser window down for responsive nav)</p>
  
  <p>I'm looking for a CSS ONLY solution for a collapsible navbar that has opening/closing animation. The height of said navbar when opened could be anything.</p>
  
  <p>I'm writing my styles in SASS, but they get compiled to a minified CSS file before I use it.
  <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>.navbar-dropdown {
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      li {
        display: inline-block;
        position: relative;
        a {
          box-sizing: border-box;
          display: block;
          color: $nav-anchor;
          font-weight: 300;
          padding: 1rem;
          text-decoration: none;
          transition: background .5s;
          &amp;:hover,
          &amp;:focus,
          &amp;:focus-within {
            color: $nav-anchor-hover
          }
        }
        ul {
          background: $nav-dropdown-background;
          display: none;
          left: 0;
          position: absolute;
          top: 56px;
          min-width: 10rem;
        }
        &amp;:hover,
        &amp;:focus,
        &amp;:focus-within {
          background: $nav-hover;
          ul {
            display: block;
            li {
              display: list-item;
              padding: .5rem;
              &amp;:hover,
              &amp;:focus,
              &amp;:focus-within {
                background: $nav-dropdown-hover;
              }
              a {
                color: $nav-anchor-child;
                &amp;:hover,
                &amp;:focus,
                &amp;:focus-within {
                  color: $nav-anchor-child-hover
                }
              }
            }
          }
        }
      }
    }
  }
  
  
  /*Style 'show menu' label button and hide it by default*/
  
  .nav-toggle {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #333;
    background: #18453b;
    text-align: right;
    padding: 10px 0;
    display: none;
  }
  
  
  /*Hide checkbox*/
  
  #nav-toggle {
    display: none;
    opacity: 0;
    animation: anim-back .3s ease-in-out;
  }
  
  
  /*Show menu when invisible checkbox is checked*/
  
  #nav-toggle:checked~#menu {
    display: block;
  }
  
  
  /*Responsive Styles*/
  
  @media screen and (max-width: 760px) {
    /*Make dropdown links appear inline*/
    #menu {
      display: none;
    }
    /*Create vertical spacing*/
    li {
      margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    ul li,
    li a {
      width: 100%;
    }
    /*Display 'nav toggle'*/
    .nav-toggle {
      display: block;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav-container"&gt;
    &lt;label for="nav-toggle" class="nav-toggle button"&gt;Menu&lt;/label&gt;
    &lt;input type="checkbox" id="nav-toggle" role="button"&gt;
    &lt;div id="menu" class="container"&gt;
      &lt;nav id="" class="navbar navbar-dropdown"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Students&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Faculty &amp; Staff&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Alumni &amp; Friends&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Research&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Diversity&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  I can get the nav to collapse and expand just fine, but I'm looking at a way to animate that menu opening/closing when the button is clicked to open or close it with ONLY CSS.</p>