-
Notifications
You must be signed in to change notification settings - Fork 65
/
index.html
134 lines (99 loc) · 6.42 KB
/
index.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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="cleartype" content="on">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>Slide Menu by Tegan Snyder</title>
<!--Include JQM and JQ-->
<link rel="stylesheet" href="css/themes/jqmfb.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.structure.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/jquery.animate-enhanced.min.js"></script>
<!--JQM globals you can edit or remove file entirely... note it needs to be loaded before jquerymobile js -->
<script src="js/jqm.globals.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<!--JQM SlideMenu-->
<link rel="stylesheet" href="css/jqm.slidemenu.css" />
<script src="js/jqm.slidemenu.js"></script>
</head>
<body>
<div id="slidemenu">
<div id="profile">
<img src="img/tegan.jpg">
<div class="profile_info"><strong>Tegan Snyder</strong><br><small>Web & Mobile Developer</small></div>
</div>
<h3>MENU</h3>
<ul>
<li><a href="#main_page"><img src="img/smico3.png">Home</a></li>
<li><a href="#another_page"><img src="img/smico2.png">Tegan Snyder</a></li>
<li><a href="#another_page2"><img src="img/smico5.png">Invite Friends</a></li>
<li><a href="#another_page3"><img src="img/smico6.png">Settings</a></li>
<li><a href="test.html" rel="external"><img src="img/smico4.png">Help</a></li>
</ul>
<h3>SOMETHING</h3>
<ul>
<li><a href="#another_page3"><img src="img/smico3.png">Activity</a></li>
<li><a href="test.html" rel="external"><img src="img/smico5.png">Invite Friends</a></li>
<li><a href="#another_page"><img src="img/smico6.png">Settings</a></li>
<li><a href="test.html" rel="external"><img src="img/smico4.png">Help</a></li>
<li><a href="#another_page2"><img src="img/smico3.png">Activity</a></li>
<li><a href="test.html" rel="external"><img src="img/smico5.png">Invite Friends</a></li>
<li><a href="#main_page"><img src="img/smico6.png">Settings</a></li>
<li><a href="#another_page"><img src="img/smico4.png">Help</a></li>
<li><a href="test.html" rel="external"><img src="img/smico3.png">Activity</a></li>
<li><a href="#another_page2"><img src="img/smico5.png">Invite Friends</a></li>
<li><a href="test.html" rel="external"><img src="img/smico6.png">Settings</a></li>
<li><a href="test.html" rel="external"><img src="img/smico4.png">Help</a></li>
</ul>
</div>
<div data-role="page" id="main_page" data-theme="a">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding="false">
<a href="#" data-slidemenu="#slidemenu" data-slideopen="false" data-icon="smico" data-corners="false" data-iconpos="notext">Menu</a>
<h1>Slide Menu</h1>
</div>
<div data-role="content">
<p>This is a hardware accelerated slide menu example. I modeled it after Facebook's famous menu. Click the icon at the top left of the screen to expose the menu. You can also swipe left/right activate it. When the menu is exposed it resizes the data-role="page" container and is position absolutely above all other elements.</p>
<p>Note: Menu would work best in a Phonegap application with the device orientation locked to Portrait.
<p>Example by <a href="http://www.tegdesign.com">Tegan Snyder</a></p>
<p>Animate Enhanced by <a href="http://playground.benbarnett.net/jquery-animate-enhanced/">Ben Barnett</a></p>
<p>Samuel L. Ipsum for <a href="http://slipsum.com">lorem ipsum</a>
</div>
</div>
<div data-role="page" id="another_page" data-theme="a">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding="false">
<a href="#" data-slidemenu="#slidemenu" data-slideopen="false" data-icon="smico" data-corners="false" data-iconpos="notext">Menu</a>
<h1>Slide Menu</h1>
</div>
<div data-role="content">
<h2>This is an example of another page loaded</h2>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
</div>
</div>
<div data-role="page" id="another_page2" data-theme="a">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding="false">
<a href="#" data-slidemenu="#slidemenu" data-slideopen="false" data-icon="smico" data-corners="false" data-iconpos="notext">Menu</a>
<h1>Slide Menu</h1>
</div>
<div data-role="content">
<h2>Lookie HERE!</h2>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.</p>
</div>
</div>
<div data-role="page" id="another_page3" data-theme="a">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding="false">
<a href="#" data-slidemenu="#slidemenu" data-slideopen="false" data-icon="smico" data-corners="false" data-iconpos="notext">Menu</a>
<h1>Slide Menu</h1>
</div>
<div data-role="content">
<h2>Some stuff and stuff</h2>
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
</div>
</div>
</body>
</html>