Sliding menu

dabblet.css

/**
 * Sliding menu
 */

* {
	box-sizing: border-box;
} 


html {
	background-color: red;
}
body{
	background-color: blue;
	overflow-y: scroll;
}
header{
	background-color: green;
}
#outer-container {
	background-color: silver;
}
nav{
	background-color: yellow;
}
#container{
	background-color: orange;
}
footer{
	background-color: teal;
}
html, body, header,#outer-container, nav, #container, footer {
	margin:0;
	padding:0;
}
header {
	height: 5em;
}
#outer-container {
	vertical-align: top;
	position: relative;
}
nav {
	position: absolute;
	top:0;
	left:0;
	width: 10em;
	height:100%;
}

nav ol,
nav li {
	transition: all 0.9s ease-out;
}
nav ol {
	position: absolute;
	top: 0;
	bottom:0;
	left:1em;
	right:0;
	z-index: 5;
	margin:0;
	padding:0;
	list-style: none;
	overflow: hidden;
}

nav li {
	background-color: pink;
	transform: translate(-150%, 0px);
	height: 2em;
}

nav li.parent > ol > li {
	height:0;
}

nav:not(.parent) > ol > li,
nav li.current,
nav li.parent{
	transform: translate(0, 0px);
	height:2em !important;
	white-space: nowrap;
}

nav li.current li li{
	white-space: normal;
}

nav:not(.parent) > ol > li,
nav li.parent > ol,
nav li.current > ol{
	top: 2em;
	left: 0;
	overflow: visible;
}

nav li.current > ol > li{
	transform: translate(0, 0px);
}

nav li.current ~ li{
	transform: translate(150%, 0px);
}

nav li.current ~ li li{
	transform: translate(0, 0px);
}

#container {
	margin-left: 10em;
	min-height: 30em;
}

footer {
	height: 5em;
}

dabblet.html

<header>
Peddah
</header>
<div id="outer-container">
	<nav class="parent">
		<ol>
			<li class="parent">Outer1<ol>
				<li class="current">Middle1<ol>
					<li><a href="#">last1</a></li>
					<li><a href="#">last2</a></li>
					<li><a href="#">last3</a></li>
					<li class="">Last but not really<ol>
						<li class="">Deep nesting! Woo-hoo!<ol>
							<li><a href="#">This bedda be some fancy function!</a></li>
							<li><a href="#">This too..</a></li>
						</ol></li>
						<li class="">We need spolunking gear!<ol>
							<li><a href="#">Some serious deepness</a></li>
							<li><a href="#">in here</a></li>
						</ol></li>
					</ol></li>
				</ol></li>
				<li>Middle2<ol>
					<li><a href="#">last4</a></li>
					<li><a href="#">last5</a></li>
					<li><a href="#">last6</a></li>
				</ol></li>
				<li><a href="#">Middle-link</a></li>
			</ol></li>
			<li>Outer2<ol>
				<li>Middle4<ol>
					<li ><a href="#">last7</a></li>
					<li ><a href="#">last8</a></li>
					<li ><a href="#">last9</a></li>
				</ol></li>
				<li>Middle5<ol>
					<li  ><a href="#">last10</a></li>
					<li  ><a href="#">last11</a></li>
					<li  ><a href="#">last12</a></li>
				</ol></li>
			</ol></li>
		</ol>
	</nav>
	<div id="container">
	inhalt
	</div>
</div>
<footer>
fuss
</footer>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"html"}