doodling menu

dabblet.css

/**
 * doodling menu
 */
* {
	box-sizing: border-box;
	transition: all 0.5s ease;
	vertical-align: middle;
}


html, body {
	margin: 0;
	padding: 0;}

body > header {
	width: 100%;
	height: 3em;
	padding: 0 1em;
	margin: 0;
}

.container.main {
	width: 100%;
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-content: center;
	align-items: center;
}

nav.menu {
	order: 1;
	flex: 2 2 auto;
	align-self: flex-start;
	min-width: auto;
	min-height: auto;
}

.content.dynamic {
	order: 2;
	flex: 3 2 auto;
	align-self: flex-start;
	min-width: auto;
	min-height: 100%;
}

nav li {
overflow: hidden;
}

nav li > ul {
	max-height: 0
}

nav li:hover > ul {
	max-height: 500px
}

dabblet.html

<header>
	<h1>
		Lorem Ipsum
	</h1>
</header>
<section class="content box main container">
	<nav class="menu">
		<ul>
			<li>
				<a href="#">Lorem</a>
				<ul>
					<li>
						<a href="#">Li</a>
					</li>
					<li>
						<a href="#" class="current">European</a>
					</li>
					<li>
						<a href="#">Linguae</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Ipsum</a>
			</li>
			<li>
				<a href="#">Dolor</a>
				<ul>
					<li>
						<a href="#">Arep</a>
					</li>
					<li>
						<a href="#">Anemo</a>
					</li>
					<li>
						<a href="#">Antiguanne</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Sit</a>
			</li>
			<li>
				<a href="#">Amet</a>
			</li>
		</ul>
	</nav><section class="content box dynamic">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a lacus non lorem gravida euismod. Proin at augue sapien. Fusce mattis nisi gravida eros laoreet euismod. Vestibulum adipiscing est sed neque dapibus mattis at a nunc. Integer varius sem quis urna euismod dignissim. Etiam vehicula justo rhoncus lorem congue vitae consectetur metus gravida. Morbi egestas metus sit amet dolor molestie sollicitudin. Vivamus semper fringilla cursus. Integer sed lectus ac diam mattis pellentesque non sed magna. Donec justo dui, pretium sed aliquet nec, sagittis quis velit. Maecenas tincidunt leo sit amet lorem eleifend in malesuada mi malesuada. Maecenas aliquet tincidunt leo eget cursus.

Nullam vitae dolor eget mi dapibus varius nec nec velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ac enim dolor, sit amet scelerisque libero. Quisque non quam nunc. Suspendisse augue dolor, eleifend nec viverra at, cursus sit amet diam. Mauris eget quam purus, ut congue enim. Quisque pharetra laoreet tortor, ut luctus velit lobortis sed. In porta, diam non pulvinar vestibulum, diam ligula sodales leo, et vestibulum diam libero vel velit. Duis non blandit tortor. Cras vel nunc ante, ac aliquam massa. Vivamus tempor pulvinar congue.

Curabitur neque ipsum, lacinia quis auctor aliquam, ultricies nec nisi. Vivamus hendrerit ligula sit amet tortor sollicitudin molestie ultricies neque hendrerit. Duis vel dui urna. Sed aliquet mauris sit amet turpis vulputate euismod. Mauris sollicitudin consequat nulla id tincidunt. Nulla luctus ornare rhoncus. Maecenas magna elit, ornare et convallis vel, mattis ut ante. Sed ultrices elementum diam, vel cursus mauris pretium ut. Aliquam ornare imperdiet condimentum. Quisque cursus arcu a lorem tincidunt imperdiet. Ut in dolor quis purus aliquam pretium ut quis diam.

Pellentesque sagittis malesuada iaculis. Suspendisse potenti. Quisque ac nulla magna. Aenean convallis augue at dui aliquet convallis. Nam quis nunc risus, id feugiat mi. Etiam urna turpis, sagittis vel fringilla id, feugiat ut lorem. Ut mattis faucibus velit ut interdum. Cras semper felis sit amet ligula venenatis accumsan. Nam auctor tellus vel mauris sagittis imperdiet. Morbi eu aliquet massa. Quisque a massa id diam porta dictum at ornare leo. Ut a tortor ante.

Nunc quis dignissim sapien. Etiam sodales placerat ipsum, fermentum aliquam velit blandit ut. Etiam mollis dignissim tempor. Duis sit amet eros sed dui consectetur sollicitudin sed id quam. Aliquam in justo vel quam rhoncus rhoncus sed vitae lacus. In ac ligula ut neque tincidunt pulvinar a sed ipsum. Mauris non est in lorem fermentum rhoncus. Sed tristique vestibulum magna, at condimentum est gravida eu. Proin hendrerit, risus non semper luctus, tellus velit pretium nisi, non luctus sapien velit vitae lorem. Suspendisse potenti. Praesent pretium sollicitudin tellus ac mattis. Donec sodales malesuada libero eu bibendum. Etiam dictum metus eu quam suscipit interdum. Nam vestibulum, lacus sit amet rutrum consectetur, arcu arcu gravida dolor, a placerat lectus felis non lectus. Quisque mattis urna sed nulla lobortis a pulvinar lorem mattis. Cras a ipsum nunc, et convallis massa.
	</section>
</section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}