title: Animate existing drop down menu on click
body: <p>This is the HTML</p>
  
  <pre><code>&lt;header&gt;
    &lt;a class="show-menu"&gt;Menu&lt;/a&gt;
    &lt;nav&gt;
      &lt;a&gt;anchor1&lt;/a&gt;
      &lt;a&gt;anchor2&lt;/a&gt;
      &lt;a&gt;anchor3&lt;/a&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>The CSS currently hides the nav anchors until the button is clicked, then the jquery toggles the class attribute to change display:none to display:block.</p>
  
  <p>This is the current JS which successfully displays the list when Menu is clicked, but I'm trying to animate it, so that when the button is clicked the list will slide into position.</p>
  
  <pre><code>$(function() {
    $('a.show-menu').click(function() {
    $('header nav').toggleClass('active');
    });
    });
  </code></pre>