/
mobile-menu-demo.html
83 lines (69 loc) · 2.88 KB
/
mobile-menu-demo.html
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
80
81
82
83
<!DOCTYPE html>
<html>
<head>
<title>Mobile Menu Hamburger</title>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no"/>
<!--Using jQuery and jQuery UI for display effects-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!--Using the hamburger menu display code-->
<script src="js/hamburger.js"></script>
<!--Using Media Queries, if the viewport is smaller than 700px use another stylesheet-->
<link rel="stylesheet" type="text/css" media="all" href="css/hamburger.css"/>
</head>
<body>
<!--This wrapping container is used to get the width of the whole content-->
<div id="container">
<!--The Hamburger Button in the Header-->
<header>
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</header>
<!--The mobile navigation Markup hidden via css-->
<nav>
<ul>
<li><a href="#">menuitem 1</a></li>
<li><a href="#">menuitem 2</a></li>
<li><a href="#">menuitem 3</a></li>
<li><a href="#">menuitem 4</a></li>
<li><a href="#">menuitem 5</a></li>
<li><a href="#">menuitem 6</a></li>
</ul>
</nav>
<!--The Layer that will be layed over the content
so that the content is unclickable while menu is shown-->
<div id="contentLayer"></div>
<!--The content of the site-->
<div id="content">
<h1>The Hamburger</h1>
<h2>A Mobile Menu Template</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.
</p>
<a href="https://github.com/ymc-thzi/mobile-menu-hamburger"><img
style="position: absolute; top: 51px; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
alt="Fork me on GitHub"></a>
</div>
</div>
</body>
</html>