CSS3 Version from: http://www.onlywebpro.com/2012/04/14/how-to-create-a-beautiful-slide-out-navigation-within-a-minute/

dabblet.css

/**
 * CSS3 Version from: http://www.onlywebpro.com/2012/04/14/how-to-create-a-beautiful-slide-out-navigation-within-a-minute/
 */

body {
background: #33363b;
padding: 5px;
font: bold 14px "Open Sans",Helvetica,Arial,sans-serif}

#main_nav {
margin: 0;
padding: 0;
list-style: none}
	
#main_nav li {
float: left;
margin: 0;
height: 100px}
	
#main_nav a {
color: #fff;
text-align: center;
padding: 30px 0;
text-decoration: none;
display: block;
margin-top: -80px;
min-width: 80px;
transition: .1s ease-in-out}

#main_nav li:hover a {margin-top: -15px}
	
.apple {background: #f01b44}
.boy {background: #fa941c}
.cat {background: #de383e}
.design {background: #f4382d}
.elephant {background: #faca13}
.fox {background: #df9d35}
.gun {background: #f24125}
.hot {background: #df912e}
.ice {background: #f7a51a}
.jazz {background: #f01b44}

dabblet.html

<ul id="main_nav">
    <li><a href="#" class="apple">Apple</a></li>
    <li><a href="#" class="boy">Boy</a></li>
    <li><a href="#" class="cat">Cat</a></li>
    <li><a href="#" class="design">Design</a></li>
    <li><a href="#" class="elephant">Elephant</a></li>
    <li><a href="#" class="fox">Fox</a></li>
    <li><a href="#" class="gun">Gun</a></li>
    <li><a href="#" class="hot">Hot</a></li>
    <li><a href="#" class="ice">Ice</a></li>
    <li><a href="#" class="jazz">Jazz</a></li>
</ul>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}