stamaniorec · June 15, 2016 20:08
diff --git a/push-over-menu.html b/push-over-menu.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>Push over menu</title>

    <style type="text/css">

    ul, p { margin: 0; }
    span.toggler { display: block; width: 20px; height: 20px; background-color: white; position: absolute; top: 5px; left: 5px; }

    aside {
      background-color: #555;
      width: 0;
      float: left;
    }

    aside.open { width: 40%; }

    main {
      background-color: #999;
      width: 100%;
      float: left;
      text-align: center;
      position: relative;
    }

    main.open { width: 60%; }

    aside, main {
      transition: all 0.2s ease;
    }

    body { display: flex; }

    </style>
 </head>
 <body>

 <aside>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
 </aside>
 <main>
    <span class="toggler"></span>
    <p>Click the white button to reveal menu</p>
 </main>

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
 <script type="text/javascript">
 (function() {

 $("span.toggler").on('click', function() {
    $("aside").toggleClass("open");
    $("main").toggleClass("open");
 });

 })();
 </script>

 </body>
 </html>