title: Mobile navigation menu from apple website
body: <p>How to build the animations from the new apple website for mobile devices.
  To describe the effect, basically the user can tap onto the left upper corner menu, then the two parallel lines will transform into an "x", which shows the previously hidden nav that can be swiped right to reveal more content. 
  <a href="http://www.apple.com/de/" rel="nofollow">http://www.apple.com/de/</a> - viewed on  my chrome device tools.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.header-top input').on('click', function () {
      if ($(this).val() == '=') {
          $(this).val('x');
          $('.header-bot').hide();
      } else {
          $(this).val('=');
          $('.header-bot').show();
      }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      margin:auto;
      background: #f2f2f2;
  }
  .header {
      position:relative;
      background-color: #fff;
      font-size:2em;
      height: 50px;
  }
  .header-top {
      height: 50px;
  }
  .header-top input {
      float:left;
      font-size:inherit;
      padding:0;
      border-style:none;
      background-color:transparent;
      height: 50px;
      outline: none;
      margin-left: 15px;
      cursor: pointer;
  }
  .header-bot {
      position:absolute;
      white-space:nowrap;
      width:100%;
      overflow:auto;
      height: 50px;
      background-color: #fff;
      border-top: 1px solid #f2f2f2;
  }
  .header-bot li {
      margin-left:1em;
      float: left;
      text-decoration:none;
      color: #999;
      list-style: none;
      cursor: pointer;
      font-family: sans-serif;
      font-size: 14px;
      line-height: 50px;
  }
  .header-bot li:hover {
      color: #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
      &lt;div class="header"&gt;
          &lt;div class="header-top"&gt;
              &lt;input type="button" value="="&gt;
          &lt;/div&gt;
          &lt;div class="header-bot"&gt;
              &lt;li&gt;google&lt;/li&gt;
              &lt;li&gt;yahoo&lt;/li&gt;
              &lt;li&gt;msn&lt;/li&gt;
              &lt;li&gt;codingforums&lt;/li&gt;
              &lt;li&gt;jsfiddle&lt;/li&gt;
              &lt;li&gt;google&lt;/li&gt;
              &lt;li&gt;yahoo&lt;/li&gt;
              &lt;li&gt;msn&lt;/li&gt;
              &lt;li&gt;codingforums&lt;/li&gt;
              &lt;li&gt;jsfiddle&lt;/li&gt;
              &lt;li&gt;google&lt;/li&gt;
              &lt;li&gt;yahoo&lt;/li&gt;
              &lt;li&gt;msn&lt;/li&gt;
              &lt;li&gt;codingforums&lt;/li&gt;
              &lt;li&gt;jsfiddle&lt;/li&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>