Toekan v2

by PhilQ

HTML

<div id="top"></div>

<div id="menu" class=""></div>

<div id="body">
	
	<div class="block-content statusbox">Dit is een systeemmelding</div>
	
	<div class="block-content statusbox success">Dit is een systeemmelding</div>
	
	<div class="block-content statusbox warning">Dit is een systeemmelding</div>
	
	<div class="block-content statusbox danger">Dit is een systeemmelding</div>
	
	<div class="block-content">
		<h1>Title</h1>
		<p>
		Lorem ekghdsk fkdsh fkdsh fkjsdh fkdsh fkdsh fk dh f skh sdl lskd flksd lsd gkhdsfkl ghs <a href="#sfhsfgg">ewfdsfsdgdsg ergddgd</a> glkd shkl dsklj gkljd kldgdkfg lkdlk kg kj k gkgkljdfglkjjdf glkdf gkljdfh gkjdfh glkdfgl kjdhkjgh dkg dkg dkjgj dkgh dkgkdfg ldfg lkdfg.
		</p>
		<a href="#" class="btn">Klik hier</a>
		<a href="#" class="btn btn-sm">Klik hier</a>
		<a href="#" class="btn btn-xs">Klik hier</a>
		<a href="#" class="btn btn-xs btn-ico"><i class="fa fa-pencil"></i></a>
		<a href="#" class="btn danger btn-xs btn-ico"><i class="fa fa-times"></i></a>
		<table>
			<thead>
				<tr>
					<th>Kop 1</th>
					<th>Kop 2</th>
					<th>Kop 3</th>
					<th>Kop 4</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>xxxx xxx xxxxx</td>
					<td>xxxx xxx xxxxx</td>
					<td>xxxx xxx xxxxx</td>
					<td>
							<a href="#" class="btn btn-xs btn-ico"><i class="fa fa-pencil"></i></a>
		<a href="#" class="btn danger btn-xs btn-ico"><i class="fa fa-times"></i></a>
</td>
				</tr>
				<tr>
					<td>xxxx xxx xxxxx</td>
					<td>xxxx xxx xxxxx</td>
					<td>xxxx xxx xxxxx</td>
					<td>
								<a href="#" class="btn btn-xs btn-ico"><i class="fa fa-pencil"></i></a>
		<a href="#" class="btn danger btn-xs btn-ico"><i class="fa fa-times"></i></a>

					</td>
				</tr>
				<tr>
					<td>xxxx xxx xxxxx</td>
					<td>xxxx xxx xxxxx</td>
					<td>xxxx xxx xxxxx</td>
					<td>
							<a href="#" class="btn btn-xs btn-ico"><i class="fa fa-pencil"></i></a>
		<a href="#" class="btn danger btn-xs btn-ico"><i class="fa...

SCSS

*,:before,:after{box-sizing:border-box;margin:0;padding:0;}
html, body {width:100%;height:100%;overflow:hidden;}
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css?family=Wellfleet&subset=latin-ext');

$blue-darker: #00316D;
$blue-dark: #015DBF;
$blue: #0273D4;
$blue-semi-light: #3495E5;//148EE5;
$blue-light: #80BAE8;
$blue-lighter: #C0DCF4;

$grey-dark: #272E31;
$grey: #515F66;
$grey-light: #CED4DB;
$grey-lighter: #F2F6F9;

$red: #c0392b;
$orange: #DDA742;
$green: #35BA66;

body {
	font-family: 'Montserrat';
	//color: $blue-light;
	font-size: 18px;
	line-height: 1.5;
	color: rgba(255,255,255, 0.7);
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1;
	font-family: 'Wellfleet', cursive;
	font-weight: normal;
	color: #fff;
	text-shadow: 0px 1px 5px rgba(#000, 0.25);
	margin-bottom: 0.5em;
}
a {
	text-decoration: none;
	outline: none;
	padding: 3px;
	color: rgba(#fff, 1);
	
	&:hover, &:focus {
		border-radius: 3px;
		background: $blue-semi-light;
	}
}
::selection{background-color:rgba(255, 255, 255, 0.99);color:$blue;text-shadow:none}
::-moz-selection{background-color:rgba(255, 255, 255, 0.99);color:$blue;text-shadow:none}
::-o-selection{background-color:rgba(255, 255, 255, 0.99);color:$blue;text-shadow:none}
::-ms-selection{background-color:rgba(255, 255, 255, 0.99);color:$blue;text-shadow:none}
::-webkit-selection{background-color:rgba(255, 255, 255, 0.99);color:$blue;text-shadow:none}


$top-height: 85px;

#top {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: $top-height;
	background: $blue;
	z-index: 50;
	box-shadow: 0px 0px 8px 0px rgba($blue-darker, 0.5);
}

#overlay {
	position: fixed;
	z-index: 60;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	opacity: 0;
	pointer-events: none;
	background: $blue-dark;
	
	&.show {
		opacity: 0.7;
		pointer-events: auto;
	}
}

#menu {
	position: fixed;
	z-index: 65;
	top: 0px;
	bottom: 0px;
	right: 0px;
	width: 250px;
	opacity:...

JavaScript

$( document ).ready(function(){
	$('#menu').on('click', function(e){
		$( this ).toggleClass('show');
	});
});