Untitled

dabblet.css

.container:after {
	content: '';
	display: block;
	height: 0;
	clear: both;
}
.container h1 {
	float: left;
}
.menu {
	float: right;
	position: relative;
	width: 33.3%;
}
.trigger,
.entries {
	display: block;
	width: 100%;
}
.entries {
	position: absolute;
	background: #fff;
	border: 1px solid #000;
	overflow: hidden;
}
.entries.is-collapsed {
	height: 0;
}

dabblet.html

<div class="container">
	<h1>Here</h1>
	<div class="menu">
		<a href="#" class="trigger">Here's the button</a>
		<div class="entries"><!-- add .iscollapsed to collapse -->	
			<p>Here's an entry</p>
			<p>Here's another</p>
			<p>And one more</p>
			<p>And one final one for good luck.</p>
		</div>
	</div>		
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu augue velit. Morbi sodales eleifend enim et gravida. Vestibulum suscipit luctus nibh sed pulvinar. In hac habitasse platea dictumst. Etiam dignissim, nunc a fringilla euismod, mi sapien lacinia neque, et ultricies nibh sem nec felis. Curabitur aliquam fermentum leo, eu fringilla lorem vehicula vitae. Duis pretium, dolor iaculis varius facilisis, dolor nisl hendrerit massa, nec pharetra massa mauris sed odio. Curabitur nunc dui, venenatis at porta sed, auctor vitae justo. Vivamus fermentum tincidunt fermentum. Maecenas et magna ut diam tristique interdum. Etiam ornare, ipsum ac varius facilisis, massa felis suscipit tortor, sit amet tincidunt libero sem sit amet sapien. Fusce tellus nulla, porttitor a tempor elementum, elementum a nisi.</p>
<p>Cras dui purus, varius sed tristique sit amet, tincidunt at justo. Fusce ac sapien augue. Aenean id diam sit amet ipsum tincidunt mollis vel nec arcu. Nunc convallis facilisis magna placerat volutpat. In mi arcu, vestibulum scelerisque fermentum sit amet, accumsan non tellus. Cras urna elit, congue quis condimentum sit amet, tristique imperdiet quam. Donec ac risus non diam tincidunt elementum sit amet et felis. Etiam commodo pharetra sem at vehicula.</p>
<p>Proin ut neque vel nisi suscipit vehicula. Fusce euismod enim a libero aliquet dignissim. Duis ullamcorper arcu eu ligula venenatis bibendum. Etiam id massa sem, ut imperdiet enim. Aenean sit amet nunc et odio consectetur porttitor. Sed quam lorem, facilisis id posuere at, posuere in augue. Vestibulum non mauris arcu, nec aliquam mi. Vestibulum viverra nisi id turpis viverra blandit. Duis arcu purus, viverra sit amet ornare nec, sagittis vel nisl. Donec egestas gravida turpis, laoreet faucibus felis adipiscing at. Suspendisse volutpat elit ac felis aliquet vel adipiscing felis viverra. Duis massa lectus, fringilla non auctor nec, sagittis at dui. Vestibulum nec ligula dui. Curabitur ultricies, lacus sed volutpat imperdiet, libero est vulputate mi, et dapibus risus nisl a tortor. Vestibulum dapibus, risus eu vestibulum adipiscing, sapien tortor dictum quam, a auctor diam magna vel magna. Phasellus venenatis ullamcorper nibh in dapibus.</p>
<p>Duis rutrum fringilla erat, sed blandit est rhoncus vel. Aenean facilisis malesuada diam nec pulvinar. Aliquam erat volutpat. Phasellus auctor volutpat risus, eu hendrerit ipsum mollis non. Morbi mattis urna et massa malesuada id semper diam sollicitudin. Sed condimentum imperdiet massa, et porttitor urna venenatis eget. Fusce pulvinar elementum elit, at rutrum urna tempus a.</p>
<p>Quisque id posuere neque. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum et nunc sit amet risus fermentum semper a euismod sapien. Nunc commodo, velit eu scelerisque placerat, ligula nunc vehicula enim, id tincidunt nibh mi non justo. In hac habitasse platea dictumst. In at sodales mauris.</p>

settings.json

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