title: sidebar disappear when window is at a certain width
body: <p>i have created a site with a side bar. the sidebar has been made to change size as the window shrinks but there still isn't enough space on the page. so i have been looking around to find a way that i can have the side bar disappear when the screen is shrunk. there also needs to be a button that you can press to bring the sidebar back until your mouse isn't on that sidebar any more. i thought this is also good for mobile devices to. i have been looking for a while now but can't seem to get this right. the code is below could any body help :) </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      margin: 0;
      background: -webkit-linear-gradient(left,  lightblue,#FFFF66, #FF3333 ); /* For Safari 5.1 to 6.0 */
  }
  
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 25%;
  
      position: fixed;
      height: 100%;
      overflow: auto;
      
  }
  
  li a {
      display: block;
      color: #000;
      padding: 8px 0 8px 16px;
      text-decoration: none;
  }
  
  li a.active {
      background-color: #4CAF50;
      color: white;
  }
  
  li a:hover:not(.active) {
      background-color: #555;
      color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;&lt;a class="active" href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="messages/message.php"&gt;Messages&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="ask.php"&gt;ASK&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="cloud.php"&gt;Cloud Access&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="gallery.php"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
    &lt;ul style="float:right;list-style-type:none;"&gt;
      &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="login.php"&gt;Login&lt;/a&gt;&lt;/li&gt;
      
    &lt;/ul&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>at the moment it resizes but i need it to disappear at a certain width reappear back and when is under the width were you can't see it there needs to be a button to make it appear at the width most preferably the width that my code already says it to do. if you can't understand message i really hope i can complete this :)</p>