<!DOCTYPE html>
<html>
<head>
<title>Left Side Menu App template</title>
<!--
This template can be used for simple app with left side menu that can be opened to switch views, for applications like Youtube App or Gmail app.
-->
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="appframework/af.ui.css" />
<link rel="stylesheet" type="text/css" href="appframework/icons.css" />
<script type="text/javascript" charset="utf-8" src="appframework/appframework.ui.min.js"></script>
<!--AppFramework plugin for sliding side menu-->
<script type="text/javascript" charset="utf-8" src="appframework/plugins/af.slidemenu.js"></script>
<!-- Required if packaging to native app using Intel XDK -->
<script src="intelxdk.js"></script>
<script src="xhr.js"></script>
<script>
function onDeviceReady(){
$.ui.launch();
intel.xdk.device.hideSplashScreen();
}
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
</script>
<!-- end Intel XDK code -->
<script>
$.ui.autoLaunch = false;
$.ui.animateHeaders = false;
$(document).ready(function(){
$.ui.setSideMenuWidth('260px');
$.ui.launch();
});
</script>
</head>
<body>
<div id="afui">
<!--Left Side Menu Navigation bar -->
<nav>
<ul class="list">
<li><a href="#page1" class="icon home">Home</a></li>
<li><a href="#page2" class="icon heart">Favorites</a></li>
<li><a href="#page3" class="icon chat">Messages</a></li>
<li><a href="#page4" class="icon user">Profile</a></li>
</ul>
</nav>
<div id="content" style="">
<!--Main View Pages-->
<div class="panel" title="Home" id="page1" data-footer="none" selected="true">
<header>
<a id="menubadge" onclick='$.ui.toggleSideMenu()' class='menuButton' style="float:left !important"></a>
<h1>Home</h1>
</header>
<p>This is view for first menu item</p>
</div>
<div class="panel" title="Favorites" id="page2" data-footer="none">
<header>
<a id="menubadge" onclick='$.ui.toggleSideMenu()' class='menuButton' style="float:left !important"></a>
<h1>Favorites</h1>
</header>
<p>This is view for second menu item</p>
</div>
<div class="panel" title="Messages" id="page3" data-footer="none">
<header>
<a id="menubadge" onclick='$.ui.toggleSideMenu()' class='menuButton' style="float:left !important"></a>
<h1>Messages</h1>
</header>
<p>This is view for third menu item</p>
</div>
<div class="panel" title="Profile" id="page4" data-footer="none">
<header>
<a id="menubadge" onclick='$.ui.toggleSideMenu()' class='menuButton' style="float:left !important"></a>
<h1>Profile</h1>
</header>
<p>This is view for fourth menu item</p>
</div>
</div>
</div>
</body>
</html>