Pure CSS Sliding Nav

Uses 2D transformations and :target pseudo-class to achieve pure CSS sliding navigation. Could be applied to any type of element.

by kpowz

HTML

<section id='outterContainer'>
    <div id='innerContainer'>
        <div class="slider-container">
            <nav class="slider">
                <ul>
                    <li>one</li>
                    <li>two</li>
                    <li>three</li>
                    <li>four</li>
                </ul>
            </nav>
        </div>
        <a id="toggle" class="expand toggle" href='#innerContainer'>slider toggle expand</a>
        <a class="collapse toggle" href='#outterContainer'>slider toggle collapse</a>
    </div>
</section>

CSS

.slider-container {
    border:1px solid lime;
    overflow:hidden;
    position:relative;
    /* the container's height will determine the height of its slider  */
    /* set height here if desired */ 
}


.slider {
	overflow-y: scroll;
	/* complete liquid height based on the parent's height!! */
    height:100%;

    /* only transition on transform properties which are hardware accelerated = way better performances */
	-webkit-transition:-webkit-transform .3s ease;
       -moz-transition:   -moz-transform .3s ease;
        -ms-transition:    -ms-transform .3s ease;
            transition:        transform .3s ease;
    
    -webkit-transform: translate(0, 100%);
       -moz-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
            transform: translate(0, 100%);
}

div:target .slider { 
    /* visible */
    -webkit-transform: translate(0, 0%);
       -moz-transform: translate(0, 0%);
        -ms-transform: translate(0, 0%);
            transform: translate(0, 0%);
}
section:target .slider { 
    /* completely offscreen */
    -webkit-transform: translate(0, 100%);
       -moz-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
            transform: translate(0, 100%);
}

/* toggle link buttons */
a.toggle,
a:hover.toggle {
   text-decoration: none; 
}
a.collapse {
    display: none;
}

div:target a.expand {
    display: none;
}
div:target a.collapse {
  display: inline;
}
section:target a.expand {
    display: inline;
}
section:target a.collapse {
    display: none;
}

/* -------- not interesting styles ----------- */
body {
    background:#eee;
    margin:50px;
}
.slider {
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
            box-sizing:border-box;

    padding:20px;
    background: pink;
    border:1px solid hotpink;
}