Slide Out Nav

Slide out nav from site:- http://www.guyroutledge.co.uk/

by Dan Wright

HTML

<!-- create checkbox that will be -->
<input type="checkbox" id="navigation" class="navCont">
<div class="site-container">
    <nav class="siteNav">
        <label for="navigation" class="nav-icon"></label>
        <ul>
            <li><a class="nav1">1 nav menu</a>
            </li>
            <li><a class="nav2">2</a>
            </li>
            <li><a class="nav3">3</a>
            </li>
            <li><a class="nav4">4</a>
            </li>
        </ul>
    </nav>
</div>

CSS

/*element styles*/
/* forces padding and border inside box size width and height*/
*{-moz-box-sizing:border-box;box-sizing:border-box;}
ul{margin:1.5em 1.5em 1.5em 1em;padding:0;list-style-position:outside;list-style-image:none;}
li{line-height:1.5;font-size:inherit;margin:0;padding:0;}
nav ul{list-style:none;list-style-image:none;}

/* input type="checkbox" switches :selected pseudo class*/
/* positioned of screen, switched using label */
.navCont {position:absolute;left:-9999px}
/* if menu is out sets margin to menu length */
.navCont:checked+.site-container {margin-left:12em}
/* overrides left -11.75em set for site nav hidden, shows nav */
.navCont:checked+.site-container .siteNav {left:0}

/* site-container used to set speed for ease-in-out */
.site-container, .siteNav {
    -webkit-transition:all 0.75s ease-in-out;
    -moz-transition:all 0.75s ease-in-out;
    -o-transition:all 0.75s ease-in-out;
    -ms-transition:all 0.75s ease-in-out;
    transition:all 0.75s ease-in-out
}
/*nav styles*/
/* relative position sets positioin relative to site container, width is width when displayed*/
.siteNav {
    position:relative;
    color:#fff;
    background:#333;
    z-index:10;
    width:12em;
}
/* ensures that nav height is 100% of body (black box), fixed position means it will always be on off screen by negative margin left, -11.75em will show only 0.25em until check box is selected */
.siteNav{position:fixed;top:0;left:-11.75em;height:100%}
/* ensures each ul > li fills the #siteNav width and top ul > li is pushed down */
.siteNav ul {margin:3em 0 0;padding:0;}

/* individaul nav items - sets lower case to upper case*/
.nav1, .nav2, .nav3, .nav4{font-family:"PTSans","Helvetica","Arial",sans-serif;}
.nav1, .nav2, .nav3, .nav4{
    display:block;
    width:100%;
    height:3em;
    line-height:3em;
    padding:0 0 0 3em;
    border-top:0;
    text-align:left;
    font-size:0.875em;
    text-transform:uppercase;
}
.nav1:hover, .nav2:hover, .nav3:hover,...