OwlCyberSecurity - MANAGER

Edit File: onepage.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="www.frebsite.nl" />
		<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />

<title>jQuery.mmenu demo</title>

<link type="text/css" rel="stylesheet" href="css/demo.css" />
		<link type="text/css" rel="stylesheet" href="../dist/jquery.mmenu.all.css" />
		
		
		<style type="text/css">
			#intro,
			#first,
			#second,
			#third
			{
				height: 400px;
			}
			#intro
			{
				padding-top: 0;
			}
			#first,
			#second,
			#third
			{
				border-top: 1px solid #ccc;
				padding-top: 150px;
			}
		</style>
		
		
		<style type="text/css">
			.header,
			.footer
			{
				position: fixed;
				left: 0;
				right: 0;
			}
			.header
			{
				top: 0;
			}
			.footer
			{
				bottom: 0;
			}
			@media (min-width: 800px) {
				.header a
				{
					display: none;
				}
			}
		</style>
		
		<script type="text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.js"></script>

<script type="text/javascript" src="../dist/jquery.mmenu.all.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$('nav#menu').mmenu({
					drag 		: true,
					pageScroll 	: {
						scroll 		: true,
						update		: true
					},
					extensions	: {
						'(min-width: 800px)': [ 'widescreen' ]
					}
				});
			});
		</script>
	</head>
	<body>
		<div id="page">
			<div class="header Fixed">
				<a href="#menu"><span></span></a>
				Demo
			</div>
			<div class="content" id="content">
				<div id="intro">
					<p><strong>This is a demo.</strong><br />
						Click the menu icon to open the menu.</p>
					<p>Some of the links in the menu link to a section on this page.</p>
				</div>
				<div id="first">
					<p><strong>This is the first section.</strong><br />
						Notice how the fixed header and footer slide out along with the page.</p>
					<p><a href="#menu">Open the menu.</a></p>
				</div>
				<div id="second">
					<p><strong>This is the second section.</strong><br />
						You can also drag the page to the right to open the menu.</p>
					<p><a href="#menu">Open the menu.</a></p>
				</div>
				<div id="third">
					<p><strong>This is the third section.</strong><br />
						It is also the last section.</p>
					<p><a href="#menu">Open the menu.</a></p>
				</div>
			</div>
			<div class="footer Fixed">
				Fixed footer :-)
			</div>
			<nav id="menu">
				<ul>
					<li><a href="#content">Introduction</a></li>
					<li><a href="#first">First section</a></li>
					<li><a href="#second">Second section</a></li>
					<li><a href="#third">Third section</a></li>

<li class="Divider">Other demos</li>
					<li><a href="default.html">Default demo</a></li>
					<li><a href="advanced.html">Advanced demo</a></li>
				</ul>
			</nav>
		</div>
	</body>
</html>