title: Sliding Drop Down Menu
body: <p>I have a drop down menu that I want to slide down when the Menu button is clicked and slide up when it's clicked again. Also slide up when clicking anywhere else in the document.</p>
  
  <p>This is what I got so far: <a href="http://jsfiddle.net/zte5eh8a/2/" rel="nofollow">jsfiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;a class="dropdown-toggle" href="#" title="Menu"&gt;Menu&lt;/a&gt;
    &lt;ul class="dropdown"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Search&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>$(function() {
    // Dropdown toggle
    $('.dropdown-toggle').click(function() {
      $(this).next('.dropdown').toggle(function() {
        $('.dropdown').stop().animate({
          top: '100%'
        }, 'slow');
      });
    });
  
    $(document).click(function(e) {
      var target = e.target;
      if (!$(target).is('.dropdown-toggle') &amp;&amp; !$(target).parents().is('.dropdown-toggle')) {
        $('.dropdown').toggle(function() {
        $('.dropdown').stop().animate({
          top: '-100px'
        }, 'slow');
      });
      }
    });
  });
  </code></pre>
  
  <p>The problem with what I did is the animation happens only once and only when clicking to open the drop down menu.</p>