ZF - Dashboardomgeving

by PhilQ

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div id="wrap">
	<header>
		<a id="home_link" href="#"><img src="https://www.zorgfocuz.nl/wp-content/uploads/2015/03/logo_zorgfocuz_web.png" alt=""></a>
		<div id="top_menu">
			<div id="logged_in">
				<div id="logged_user">Ingelogd als <b>Zorginstelling BV</b></div>
				<div id="logged_links">
					<a href="#"><i class="fa fa-pencil"></i>Gegevens wijzigen</a>
					<a href="#"><i class="fa fa-sign-out"></i>Uitloggen</a>
				</div>
			</div>
		</div>
		<div id="sub_menu">Dashboard</div>
	</header>
	
	<div id="content">
		<nav>
			<ul>
			<li><b><i class="fa fa-dashboard"></i>Mijn onderzoeken</b></li>
			<li><a href="#">CQI Kwartaal 1 2016</a></li>
			<li class="active"><a href="#">CQI Kwartaal 2 2016</a></li>
			<li><a href="#">CQI Kwartaal 3 2016</a></li>
			<li><b><i class="fa fa-exchange"></i>Bestandsuitwisseling</b></li>
			<li><a href="#">Uploaden</a></li>
			<li><a href="#">Downloaden</a></li>
			</ul>
		</nav>
		<main>
			<div id="rapport_nav">
<h1>CQI Kwartaal 2 2016</h1>
<ul>
<li>Inleiding</li>
<li class="active">Hoofdstuk 1</li>
<li>Hoofdstuk 2</li>
<li>Hoofdstuk 3</li>
<li>Hoofdstuk 4</li>
<li>Hoofdstuk 5</li>
</ul>
			</div>
<h3>Vraag 1</h3>
<p>
Bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla. Bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla. Bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla. Bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla. Bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla.
</p>
<h3>Vraag 2</h3>
<p>
Bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla. Bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla. Bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla. Bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla. Bla bla bla bla bla...

CSS

*,:before,:after {
	margin:0;
	padding:0;
	box-sizing: border-box;
}
html, body {
	width: 100%;
	height: 100%;
}
body {
	font-family: 'Open Sans';
	background: #ddd url(https://www.zorgfocuz.nl/wp-content/themes/thunder/images/bg.png) repeat;
}
h1, h2, h3 {
	font-weight: 600;
	color: #7abe23;
}
#wrap {
	width: 980px; //1060px;
	display: block;
	height: auto !important; /* real browsers */
    // height: 100%; /* IE6: treaded as min-height*/
	min-height: 100%; /* real browsers */
    background: #f4f4f4;
	background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.2),
		inset 220px 0px 0px #333;
    margin: 0 auto;
	position: relative;
}
header {
	position: relative;
	background: #fff;
	display: block;
	height: 160px;
}
#home_link {
	position:absolute;
	left: 30px;
	top: 10px;
}
#top_menu {
	width: 100%;
	height: 100px;
	padding: 10px 20px 15px 325px;
	float: right;
}
#logged_in {
	float: right;
	padding-top: 15px;
}
#logged_user {
	display: inline-block;
	float: left;
	padding: 0px 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
	margin-bottom: 10px;
	text-align: center;
}
#logged_links {
	display: block;
	clear: both;
	text-align: justify;
	font-size: 80%;
}
#logged_links a {
	display: inline-block;
	color: #888;
	text-decoration: none;
	white-space: nowrap;
}
#logged_links a:hover, #logged_links a:focus {
	color: #7abe23;
}
#logged_links a:first-child {
	float: left;
	margin-left: 10px;
	margin-right: 15px;
}
#logged_links a:last-child {
	float: right;
	margin-right: 10px;
}
#logged_links a i {
	padding-right: 3px;
}

#sub_menu {
    float: left;
	display: inline-block;
	clear: both;
    width: 100%;
    height: 60px;
    background-color: #7abe23;
	font-size: 16px;
	text-transform: uppercase;
	color: #fff;
	font-weight: 600;
	padding: 18px 30px;
}

#content {
	width: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	display: block;
	position: relative;
}
nav {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 220px;
	min-height:...

JavaScript

$( document ).ready( function() {
	$('#rapport_nav > ul')
	.on('mouseover', function( e ){
		$( this ).addClass('open');
	})
	.on('mouseout', function( e ){
		$( this ).removeClass('open');
	});
} );