LostCore
4/12/2013 - 1:38 AM

Layout for CSS-only slide-out mobile menu.

Layout for CSS-only slide-out mobile menu.

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <style>
    body {
      margin: 0;
      }
    body.menu #menu {
      opacity: 1;
      -webkit-transition: opacity 0 0;
      -moz-transition:    opacity 0 0;
      -ms-transition:     opacity 0 0;
      -o-transition:      opacity 0 0;
      transition:         opacity 0 0;

      }
    body.menu #main {
      -webkit-transform: translateX(66%);
      -moz-transform: translateX(66%);
      -ms-transform: translateX(66%);
      -o-transform: translateX(66%);
      transform: translateX(66%);
      }
    #wrapper {
      position: relative;
      overflow-x: hidden;
      }
    #menu {
      position:absolute;
      top: 0;
      left: 0;
      width: 66%;
      bottom: 0px;
      background: #369;
      color: white;
      opacity: 0;
      -webkit-transition: opacity 0 0.2s;
      -moz-transition: opacity 0 0.2s;
      -ms-transition: opacity 0 0.2s;
      -o-transition: opacity 0 0.2s;
      transition: opacity 0 0.2s;
      }
    #main {
      position: relative;
      min-height: 100%;
      background: #eee;
      box-shadow: -4px 0px 5px rgba(0,0,0,0.5);
      -webkit-transition: -webkit-transform 0.2s;
      -moz-transition: -moz-transform 0.2s;
      -ms-transition: -ms-transform 0.2s;
      -o-transition: -o-transform 0.2s;
      transition: transform 0.2s;
      -webkit-perspective: 1000;
      -webkit-backface-visibility: hidden;
      }
    #content { padding: 20px; }
    #bar {
      height: 20px;
      padding: 10px;
      background: #333;
      }
    #bar a { color: white; }
    </style>
</head>
<body><div id="wrapper">
<div id="menu">
	<ul>
  	<li>Menu item</li>
  	<li>Menu item</li>
  	<li>Menu item</li>
	</ul>
</div>
<div id="main">
  <div id="bar">
    <a id="show" href="#">Menu</a>
  </div>
  <div id="content">
    <h1>A great header</h1>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
    <p>With some content below it that is long enough to wrap around a few lines or so.</p>
  </div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$('#show').click(function(e) {
    $('body').toggleClass('menu');
    return false;
});
</script>
</div></body>
</html>