title: toggling menu vertically with jquery
body: <p>Please see this codepen for an example of what I am talking about <a href="http://codepen.io/MarkRBM/pen/auDvp" rel="nofollow">http://codepen.io/MarkRBM/pen/auDvp</a></p>
  
  <p>I have a nav .mainnav containing a series of links (not a list not sure if its better for them to be a list or not).  onclick the display of .mainnav is toggled and the links appear aswell as a div to close the nav again.</p>
  
  <p>Issue1: The divs animation comes from the left so they slide in from the left but I would like them to slide down from the div you click to make them appear.</p>
  
  <p>Issue2:  I would like the links to appear one by one quickly but obviously one by one.</p>
  
  <p>Here is the code</p>
  
  <p>Html</p>
  
  <pre><code>&lt;div class="navtoggle"&gt;Menu&lt;/div&gt;
                      &lt;div class="navtoggleclose"&gt;X&lt;/div&gt;
                      &lt;nav class="mainnav"&gt;
                          &lt;a href=""&gt;&lt;div class="navbutton"&gt;Home&lt;/div&gt;&lt;/a&gt;
                          &lt;a href=""&gt;&lt;div class="navbutton"&gt;About&lt;/div&gt;&lt;/a&gt;
                          &lt;a href=""&gt;&lt;div class="navbutton"&gt;Locations&lt;/div&gt;&lt;/a&gt;
                          &lt;a href=""&gt;&lt;div class="navbutton"&gt;Prices&lt;/div&gt;&lt;/a&gt;
                          &lt;a href=""&gt;&lt;div class="navbutton"&gt;Book&lt;/div&gt;&lt;/a&gt;
                          &lt;a href=""&gt;&lt;div class="navbutton"&gt;Private&lt;/div&gt;&lt;/a&gt;
                          &lt;a href=""&gt;&lt;div class="navbutton"&gt;Affiliates&lt;/div&gt;&lt;/a&gt;
                          &lt;a href=""&gt;&lt;div class="navbutton"&gt;Shop&lt;/div&gt;&lt;/a&gt;
                      &lt;/nav&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.navtoggle{
      display: block;
      visibility: visible;
      text-align: center;
    }
    .navtoggleclose{
      display: none;
      visibility: visible;
      text-align: center;
    }
  .mainnav{
    display: none;
  
  }
  
  
  .navbutton{
    display: none;
    text-align: center;
    width: 50%;
    margin-right: auto;
    margin-left: auto;
    background: $rgradl;
    border-radius: 5%;
    margin-top: 0.4em;
    box-shadow: $dshadow;  
  }
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>$(".navtoggle").click(function () {
              $(".mainnav").toggle("slow");
              $(".navtoggle").toggle("slow");
              $(".navtoggleclose").toggle("slow");
              $(".navbutton").toggle("slow");
          });
  
          $(".navtoggleclose").click(function(){
              $(".mainnav").toggle("slow");
              $(".navtoggle").toggle("slow");
              $(".navbutton").toggle("slow");
              $(".navtoggleclose").toggle("slow");
          });
  </code></pre>