title: Simple responsive navigation menu
body: <p>I created this menu in HTML:</p>
  
  <pre><code>&lt;div class="trigger" style="display:none;"&gt;menu&lt;/div&gt;
  
  
  &lt;div class="nav"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;            
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>then I wrote some CSS code to make it look responsive, And I wrote that on 400px the navigation will be hidden and only if you click on the button it will show up, it's working good</p>
  
  <p>the problem is if I click on the menu (on the 400px) to show it and I click again to hide it when I resize the windows to higher dimensions the navigation stays hidden.</p>
  
  <p>Example: <a href="http://jsfiddle.net/b6pdy89u/" rel="nofollow">http://jsfiddle.net/b6pdy89u/</a></p>
  
  <p>What is the best way to create this navigation?</p>