mold/sidemenuexample

## sidemenuexample
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>TEST :)</title>
	<link rel="stylesheet" href="">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
	<style type="text/css">
		html,body{
			height:100%;
			width:100%;
			padding:0;
			margin:0;
		}

		.top-bar, .top-bar2{
			width: 100%;
			height: 40px;
			background:lightblue;
			position: fixed;
			top: 0;
			margin: 0;
			padding:0;
			z-index: 100;
		}

		.top-bar2{
			position: relative;
		}

		.non-fixed-container, .container{
			width: 200px;
			height:100%;
		}

		.container{
			position: fixed;
			top:0;
			bottom:0;
			left:0;
		}

		.non-fixed-container {
			position: relative;
			/*height: 100%;*/
		}

		.header{
			height: 40px;
			background:#aaf;
			position: fixed;
			/*top:0;*/
			width:inherit;
			color:white;
			text-align: center;
		}

		.header h3{
			line-height: 40px;
			vertical-align: middle;
			margin:0;
		}

		.inner-content{
			overflow-y: auto;
			width:inherit;
			background:lightgrey;
			position: fixed;
			bottom:0;

			/*THE ONLY CONSTANT DEPENDENT ON SMTH ELSE :) */
			top: 80px;
		}

		.content, .non-fixed-container{
			display: table-cell;
		}

		.open-menu{
			position: fixed;
			background-color:#aaf;
			width:100px;
		}
	</style>
</head>
<body>
	<div class="top-bar"></div>
	<div class="top-bar2"></div>
	<div class="open-menu" onclick="$('.non-fixed-container').toggle('slidefast')">MENU</div>
	<div class="non-fixed-container">
		<div class="header" onclick="$('.non-fixed-container').toggle('slidefast')">
			<h3>Filter</h3>
		</div>
		<div class="inner-content">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
				<li>Item 5</li>
				<li>Item 6</li>
				<li>Item 7</li>
				<li>Item 8</li>
				<li>Item 9</li>
				<li>Item 10</li>
				<li>Item 11</li>
				<li>Item 12</li>
				<li>Item 13</li>
				<li>Item 14</li>
				<li>Item 15</li>
				<li>Item 16</li>
				<li>Item 17</li>
				<li>Item 18</li>
				<li>Item 19</li>
				<li>Item 20</li>
				<li>Item 21</li>
				<li>Item 22</li>
				<li>Item 23</li>
				<li>Item 24</li>
				<li>Item 25</li>
				<li>Item 26</li>
				<li>Item 27</li>
				<li>Item 28</li>
				<li>Item 29</li>
				<li>Item 30</li>
				<li>Item 31</li>
				<li>Item 32</li>
				<li>Item 33</li>
				<li>Item 34</li>
				<li>Item 35</li>
				<li>Item 36</li>
				<li>Item 37</li>
				<li>Item 38</li>
				<li>Item 39</li>
				<li>Item 40</li>
				<li>Item 41</li>
				<li>Item 42</li>
				<li>Item 43</li>
				<li>Item 44</li>
				<li>Item 45</li>
				<li>Item 46</li>
				<li>Item 47</li>
				<li>Item 48</li>
				<li>Item 49</li>
				<li>Item 50</li>
			</ul>
		</div>
	</div>
	<div class="content">
		<p>			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis euismod libero, nec pellentesque tellus fermentum at. Praesent nisl sem, iaculis ut hendrerit sit amet, imperdiet a dolor. sPraesent maximus aliquet cursus. Integer volutpat pretium augue et malesuada. Nam sit amet vehicula ligula. Pellentesque non diam ut felis ultricies aliquet. Fusce ut mauris nec tortor consequat ultrices non in turpis. Etiam eget lacus sit amet dolor ultrices maximus bibendum rhoncus est. Suspendisse ut arcu et mi ornare sollicitudin. Suspendisse eget ipsum eget velit elementum lacinia et quis lacus. Ut semper ipsum ut tellus posuere bibendum.
		</p>
		<p>			Sed mollis arcu in leo hendrerit tempus. Suspendisse bibendum eros sit amet enim bibendum, sed bibendum nibh varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam malesuada ipsum quis maximus egestas. Aliquam pretium imperdiet arcu vitae tristique. Morbi viverra aliquam eros. Suspendisse vel nisl a justo accumsan viverra scelerisque quis urna. Suspendisse potenti. Sed eget venenatis justo. Nulla eleifend nec turpis porta mattis. Praesent varius aliquet facilisis. Nunc ipsum nunc, maximus nec laoreet non, cursus at massa.
		</p>
		<p>			Nam dapibus eget dolor sit amet placerat. Aliquam eget ante nec lorem consequat placerat quis nec nunc. Nullam vel sapien vitae tortor faucibus dapibus. Duis at semper orci. Aenean massa justo, pellentesque in libero in, tempus consequat velit. Sed non rhoncus nisi. Pellentesque a orci iaculis, pellentesque elit quis, molestie sem. Nullam ut congue sem. In ut sollicitudin ligula, quis accumsan nisl. Proin non feugiat dolor, laoreet eleifend mi. Mauris tincidunt feugiat egestas. Suspendisse potenti. Quisque molestie, diam vitae sagittis ultrices, turpis nunc eleifend augue, a lobortis turpis ex at odio. Phasellus blandit tellus ut interdum facilisis. Aenean vel leo libero.
		</p>
		<p>			Nulla molestie ullamcorper eros. Nunc gravida, urna non malesuada tincidunt, elit velit placerat tortor, id blandit ipsum lorem eget ex. Nam non vestibulum est. Mauris dolor eros, rhoncus a interdum eget, lacinia eget diam. Phasellus eget auctor nisi. Aliquam dictum eros leo, eget pellentesque eros porttitor a. Nunc tempor rutrum lobortis. Mauris lacinia malesuada volutpat. Mauris laoreet, odio eget posuere pretium, mauris orci imperdiet magna, vel egestas felis est in odio.
		</p>
		<p>			Morbi convallis erat vitae viverra scelerisque. Curabitur gravida vestibulum tempor. Sed rutrum eros id scelerisque tincidunt. Aliquam at nisi ligula. Nulla ultrices, dui eget venenatis iaculis, orci ligula lobortis nisl, sit amet lacinia nisl neque id enim. Aliquam eget erat mauris. Aenean mollis pretium elit, venenatis faucibus nisi bibendum nec. Quisque quis euismod dolor. Integer aliquet tincidunt lectus, ac facilisis massa.
		</p>
		<p>			Nunc rhoncus, ex non porttitor tincidunt, eros nisl pharetra diam, at convallis quam elit sit amet nisl. Nunc aliquam ut neque et faucibus. Aenean bibendum ipsum ac dui euismod, ut fermentum diam congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Sed eu imperdiet diam, sed efficitur risus. Praesent augue justo, vestibulum ut placerat id, scelerisque sit amet turpis. Sed sed auctor mi. Donec viverra sem id lorem bibendum vehicula. Nunc molestie ligula ex, id molestie massa rhoncus sit amet. In quis commodo mauris. Curabitur eget dapibus nulla, sit amet sollicitudin ante. Etiam eleifend sed enim id lacinia. Donec eu orci dapibus, bibendum velit scelerisque, gravida magna.
		</p>
		<p>			Curabitur accumsan ultricies ornare. Sed neque ipsum, scelerisque ut lobortis et, tempor eu neque. Sed volutpat lacus ligula, ac scelerisque nunc finibus at. Maecenas quis malesuada orci. Pellentesque elementum tellus non libero ultrices, id ornare ex porta. Quisque commodo nibh tincidunt orci eleifend tincidunt. Sed et nulla pulvinar, bibendum nisl at, fringilla orci. Sed volutpat quam non consectetur laoreet. Phasellus et dolor vitae elit tempor tempus. Vestibulum malesuada dapibus efficitur. Vivamus non bibendum libero.
		</p>
		<p>			Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque volutpat viverra justo in egestas. Pellentesque pharetra diam a porta semper. Mauris ornare nec metus non sodales. Curabitur in malesuada nunc. Cras sodales nunc quis dolor dictum placerat. Aliquam efficitur aliquet libero, at placerat libero sollicitudin et.
		</p>
		<p>			Aliquam volutpat erat ut laoreet volutpat. Suspendisse rutrum, nibh sit amet posuere aliquet, ipsum tellus condimentum lacus, sit amet pretium justo purus in ipsum. Mauris et tempor ipsum. Fusce varius tempor est vitae suscipit. Pellentesque fermentum sem eu ornare vulputate. Morbi tincidunt libero id ante facilisis malesuada. Donec gravida lectus venenatis, imperdiet massa non, luctus massa. Mauris vitae purus risus. Donec pretium, est quis maximus rhoncus, augue justo euismod ex, nec elementum diam quam quis felis.
		</p>
		<p>			Quisque consequat ligula vel velit tristique tincidunt. Cras vitae quam nec velit elementum vehicula. Duis ornare laoreet mauris, non maximus nibh pellentesque vel. Morbi sapien metus, sollicitudin non laoreet quis, tincidunt nec nisl. Nunc blandit ultricies ultricies. Sed auctor lectus vehicula tellus malesuada, a porta leo finibus. Sed non odio sit amet lacus viverra tempus. Pellentesque eget leo lorem. Duis et ante sapien. Proin ac neque id lacus tincidunt consectetur eu quis nibh. Sed ultrices magna at quam ultricies, ac pulvinar elit lacinia.
		</p>
	</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>TEST :)</title>
	<link rel="stylesheet" href="">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
	<style type="text/css">
	html,body{
	height:100%;
	width:100%;
	padding:0;
	margin:0;
	}

	.top-bar, .top-bar2{
	width: 100%;
	height: 40px;
	background:lightblue;
	position: fixed;
	top: 0;
	margin: 0;
	padding:0;
	z-index: 100;
	}

	.top-bar2{
	position: relative;
	}

	.non-fixed-container, .container{
	width: 200px;
	height:100%;
	}

	.container{
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	}

	.non-fixed-container {
	position: relative;
	/height: 100%;/
	}

	.header{
	height: 40px;
	background:#aaf;
	position: fixed;
	/top:0;/
	width:inherit;
	color:white;
	text-align: center;
	}

	.header h3{
	line-height: 40px;
	vertical-align: middle;
	margin:0;
	}

	.inner-content{
	overflow-y: auto;
	width:inherit;
	background:lightgrey;
	position: fixed;
	bottom:0;

	/THE ONLY CONSTANT DEPENDENT ON SMTH ELSE :) /
	top: 80px;
	}

	.content, .non-fixed-container{
	display: table-cell;
	}

	.open-menu{
	position: fixed;
	background-color:#aaf;
	width:100px;
	}
	</style>
	</head>
	<body>
	<div class="top-bar"></div>
	<div class="top-bar2"></div>
	<div class="open-menu" onclick="$('.non-fixed-container').toggle('slidefast')">MENU</div>
	<div class="non-fixed-container">
	<div class="header" onclick="$('.non-fixed-container').toggle('slidefast')">
	<h3>Filter</h3>
	</div>
	<div class="inner-content">
	<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
	<li>Item 6</li>
	<li>Item 7</li>
	<li>Item 8</li>
	<li>Item 9</li>
	<li>Item 10</li>
	<li>Item 11</li>
	<li>Item 12</li>
	<li>Item 13</li>
	<li>Item 14</li>
	<li>Item 15</li>
	<li>Item 16</li>
	<li>Item 17</li>
	<li>Item 18</li>
	<li>Item 19</li>
	<li>Item 20</li>
	<li>Item 21</li>
	<li>Item 22</li>
	<li>Item 23</li>
	<li>Item 24</li>
	<li>Item 25</li>
	<li>Item 26</li>
	<li>Item 27</li>
	<li>Item 28</li>
	<li>Item 29</li>
	<li>Item 30</li>
	<li>Item 31</li>
	<li>Item 32</li>
	<li>Item 33</li>
	<li>Item 34</li>
	<li>Item 35</li>
	<li>Item 36</li>
	<li>Item 37</li>
	<li>Item 38</li>
	<li>Item 39</li>
	<li>Item 40</li>
	<li>Item 41</li>
	<li>Item 42</li>
	<li>Item 43</li>
	<li>Item 44</li>
	<li>Item 45</li>
	<li>Item 46</li>
	<li>Item 47</li>
	<li>Item 48</li>
	<li>Item 49</li>
	<li>Item 50</li>
	</ul>
	</div>
	</div>
	<div class="content">
	<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis euismod libero, nec pellentesque tellus fermentum at. Praesent nisl sem, iaculis ut hendrerit sit amet, imperdiet a dolor. sPraesent maximus aliquet cursus. Integer volutpat pretium augue et malesuada. Nam sit amet vehicula ligula. Pellentesque non diam ut felis ultricies aliquet. Fusce ut mauris nec tortor consequat ultrices non in turpis. Etiam eget lacus sit amet dolor ultrices maximus bibendum rhoncus est. Suspendisse ut arcu et mi ornare sollicitudin. Suspendisse eget ipsum eget velit elementum lacinia et quis lacus. Ut semper ipsum ut tellus posuere bibendum.
	</p>
	<p> Sed mollis arcu in leo hendrerit tempus. Suspendisse bibendum eros sit amet enim bibendum, sed bibendum nibh varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam malesuada ipsum quis maximus egestas. Aliquam pretium imperdiet arcu vitae tristique. Morbi viverra aliquam eros. Suspendisse vel nisl a justo accumsan viverra scelerisque quis urna. Suspendisse potenti. Sed eget venenatis justo. Nulla eleifend nec turpis porta mattis. Praesent varius aliquet facilisis. Nunc ipsum nunc, maximus nec laoreet non, cursus at massa.
	</p>
	<p> Nam dapibus eget dolor sit amet placerat. Aliquam eget ante nec lorem consequat placerat quis nec nunc. Nullam vel sapien vitae tortor faucibus dapibus. Duis at semper orci. Aenean massa justo, pellentesque in libero in, tempus consequat velit. Sed non rhoncus nisi. Pellentesque a orci iaculis, pellentesque elit quis, molestie sem. Nullam ut congue sem. In ut sollicitudin ligula, quis accumsan nisl. Proin non feugiat dolor, laoreet eleifend mi. Mauris tincidunt feugiat egestas. Suspendisse potenti. Quisque molestie, diam vitae sagittis ultrices, turpis nunc eleifend augue, a lobortis turpis ex at odio. Phasellus blandit tellus ut interdum facilisis. Aenean vel leo libero.
	</p>
	<p> Nulla molestie ullamcorper eros. Nunc gravida, urna non malesuada tincidunt, elit velit placerat tortor, id blandit ipsum lorem eget ex. Nam non vestibulum est. Mauris dolor eros, rhoncus a interdum eget, lacinia eget diam. Phasellus eget auctor nisi. Aliquam dictum eros leo, eget pellentesque eros porttitor a. Nunc tempor rutrum lobortis. Mauris lacinia malesuada volutpat. Mauris laoreet, odio eget posuere pretium, mauris orci imperdiet magna, vel egestas felis est in odio.
	</p>
	<p> Morbi convallis erat vitae viverra scelerisque. Curabitur gravida vestibulum tempor. Sed rutrum eros id scelerisque tincidunt. Aliquam at nisi ligula. Nulla ultrices, dui eget venenatis iaculis, orci ligula lobortis nisl, sit amet lacinia nisl neque id enim. Aliquam eget erat mauris. Aenean mollis pretium elit, venenatis faucibus nisi bibendum nec. Quisque quis euismod dolor. Integer aliquet tincidunt lectus, ac facilisis massa.
	</p>
	<p> Nunc rhoncus, ex non porttitor tincidunt, eros nisl pharetra diam, at convallis quam elit sit amet nisl. Nunc aliquam ut neque et faucibus. Aenean bibendum ipsum ac dui euismod, ut fermentum diam congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Sed eu imperdiet diam, sed efficitur risus. Praesent augue justo, vestibulum ut placerat id, scelerisque sit amet turpis. Sed sed auctor mi. Donec viverra sem id lorem bibendum vehicula. Nunc molestie ligula ex, id molestie massa rhoncus sit amet. In quis commodo mauris. Curabitur eget dapibus nulla, sit amet sollicitudin ante. Etiam eleifend sed enim id lacinia. Donec eu orci dapibus, bibendum velit scelerisque, gravida magna.
	</p>
	<p> Curabitur accumsan ultricies ornare. Sed neque ipsum, scelerisque ut lobortis et, tempor eu neque. Sed volutpat lacus ligula, ac scelerisque nunc finibus at. Maecenas quis malesuada orci. Pellentesque elementum tellus non libero ultrices, id ornare ex porta. Quisque commodo nibh tincidunt orci eleifend tincidunt. Sed et nulla pulvinar, bibendum nisl at, fringilla orci. Sed volutpat quam non consectetur laoreet. Phasellus et dolor vitae elit tempor tempus. Vestibulum malesuada dapibus efficitur. Vivamus non bibendum libero.
	</p>
	<p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque volutpat viverra justo in egestas. Pellentesque pharetra diam a porta semper. Mauris ornare nec metus non sodales. Curabitur in malesuada nunc. Cras sodales nunc quis dolor dictum placerat. Aliquam efficitur aliquet libero, at placerat libero sollicitudin et.
	</p>
	<p> Aliquam volutpat erat ut laoreet volutpat. Suspendisse rutrum, nibh sit amet posuere aliquet, ipsum tellus condimentum lacus, sit amet pretium justo purus in ipsum. Mauris et tempor ipsum. Fusce varius tempor est vitae suscipit. Pellentesque fermentum sem eu ornare vulputate. Morbi tincidunt libero id ante facilisis malesuada. Donec gravida lectus venenatis, imperdiet massa non, luctus massa. Mauris vitae purus risus. Donec pretium, est quis maximus rhoncus, augue justo euismod ex, nec elementum diam quam quis felis.
	</p>
	<p> Quisque consequat ligula vel velit tristique tincidunt. Cras vitae quam nec velit elementum vehicula. Duis ornare laoreet mauris, non maximus nibh pellentesque vel. Morbi sapien metus, sollicitudin non laoreet quis, tincidunt nec nisl. Nunc blandit ultricies ultricies. Sed auctor lectus vehicula tellus malesuada, a porta leo finibus. Sed non odio sit amet lacus viverra tempus. Pellentesque eget leo lorem. Duis et ante sapien. Proin ac neque id lacus tincidunt consectetur eu quis nibh. Sed ultrices magna at quam ultricies, ac pulvinar elit lacinia.
	</p>
	</div>
	</body>
	</html>