CSS only - push-out menu and parallax demo

HTML

<input type="checkbox" id="nav-trigger" class="nav-trigger" />



<div id="main" class="parallax">
    <div class="parallax-layer-background">
        <h1>CSS Push-out Menu and parallax demo</h1>
    </div>
    <div class="parallax-layer-foreground">


    
    
    <p>This push out menu uses a checkbox and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors">general sibling selectors</a> to determine if the menu is shown.</p>
    <p>At the time of writing this is untested but should be supported all modern browsers (ie9 up) and work on touch devices too. <=ie8 needs js to support css `:checked` selector. Selectivizr does this.</p>

    NOTES TO SELF:
        <ul>
            <li>General sibling selector (~) support is excellent (ie7+)</li>
            <li>but :checked is not. Add Selectivizr or similar to this demo</li>
            <li>nested menus were not closable in build  but I dont much like this checkbox solution as it makes the menu ugly. Perhaps there's a better way?</li>
        </ul>

    NOTES TO USER:
        <ul>
            <li>Want the menu to be open on load? Just set <code>nav-trigger</code> input to <code>selected</code>.</li>
    </ul>
    
    <hr />
    
    <p>Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
<p>
Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus...

CSS

*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif;}
body {overflow-x: hidden;}




/* the parallax wrapper
enable perspective */
  .parallax {    
    height: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    -webkit-perspective: 1px;
    perspective: 1px;
  }

  *[class*="parallax-layer"] {
    position: absolute;
    display:block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border:0px solid red;
  }


    

   .parallax-layer-background {
    /* offset the z-axis to make it further away 
    but then scale it up so the size isnt reduced */
    -webkit-transform:  translateZ(-1px) scale(2);
    transform: translateZ(-1px) scale(2);
    background:url("http://lorempixel.com/800/400/") no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
      padding: 60px;
  }

  .parallax .parallax-layer-foreground {
    /* offset y-axis to make off-screen */
     background: rgb(235,245,255);   
    -webkit-transform: translateY(0%) translateZ(0);
    transform: translateY(0%) translateZ(0);
    min-height:100%;
    top:80%;
    bottom:auto;
    padding: 50px;
  }

JavaScript

/* 
TO DO:
Create JS inplementation of :checked for <IE9 
*/