MobileSideMenu/index.html at master · kikobr/MobileSideMenu · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
	<head>
		<title>
			Demo MobileSideMenu
		</title>
		<meta charset="UTF-8"/>

		<!-- Sidemenu Styles and Meta -->
		<link rel="stylesheet" href="css/compiled/mobilesidemenu.css">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>

		<section id="sidemenu">
			<ul>
				<li>
					<a href="">
						Inicial
					</a>
				</li>
				<li>
					<a href="">
						Setor 1
					</a>
				</li>
				<li>
					<a href="">
						Setor 2
					</a>
				</li>
				<li>
					<a href="">
						Setor 3
					</a>
				</li>
			</ul>
		</section>

		<section id="content" style="text-align: center;">
			<p>
				Some Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti tempore, nemo delectus laudantium esse ab unde sit accusamus fugit, at modi hic nulla tenetur ratione pariatur amet, vel! Temporibus, motherfucker. <br>
			</p>
			<p>
				The sidemenu is currently <span class="menu-status">Closed</span>
			</p>
			<button class="toggle-menu">This button will toggle on sidemenu</button>

		</section>

		<!-- Dependencies -->
		<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
		<script type="text/javascript" src="bower_components/hammerjs/hammer.min.js"></script>

		<!-- MobileSideMenu Script -->
		<script type="text/javascript" src="js/mobilesidemenu.js"></script>
		<script type="text/javascript">

			var sideMenu = $('#sidemenu').mobileSideMenu({
				//allowOverlay: true,
				//defaultStyle: false,
				//pushContent: true,
				//content: $('#content'),
			});

			// Handles Button
			$('.toggle-menu').click(function(){
				sideMenu.open();
			});

			// Auto-update element
			sideMenu.bind('isOpened isClosed', function(evt){
				$('.menu-status').text( sideMenu.isOpened ? 'Opened' : 'Closed' );
			});

		</script>

	</body>
</html>