-
Notifications
You must be signed in to change notification settings - Fork 24
/
index.html
168 lines (144 loc) · 7.03 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Off Canvas</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="HTML, CSS and jQuery plugin to create an off canvas layout for web apps or websites" />
<meta name="keywords" content="off canvas, offcanvas, app, webapp, web app" />
<link rel="stylesheet" href="css/offcanvas.css" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<script src="js/modernizr.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.offcanvas.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('html').offcanvas({
hasSidebarRight: true
});
});
</script>
<!-- If browser is internet explorer run HTML5 compatibility code -->
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
<aside id="sidebarLeft" class="sidebarLeft">
<div class="scrollableArea">
<!-- Place whatever HTML you want in here -->
<a class="shutLeft" href="">✖</a>
<div class="you padded">
<a href="http://aidanzealley.com/" target="_blank"><img class="avatar" src="pictures/aidan.jpg" alt="Aidan Zealley" width="50"/></a>
<h2><a href="http://aidanzealley.com/" target="_blank">Aidan Zealley</a></h2>
</div>
<ul class="paddedLight">
<li><a class="current" href="index.html"><span class="icon">⌂</span>Home</a></li>
<li><a href="https://github.com/AidanZealley/off.canvas" target="_blank"><span class="social"></span>GitHub Repository</a></li>
<li><a href="leftonly.html"><span class="icon">←</span>Left sidebar only</a></li>
<li><a href="rightonly.html"><span class="icon">→</span>Right sidebar only</a></li>
<li><a href="http://aidanzealley.com/"><span class="icon"></span>aidanzealley.com</a></li>
<li><a href=""><span class="icon"></span>Sign Out</a></li>
</ul>
</div>
</aside>
<section id="page" class="page">
<header class="topBar">
<a id="leftBurger" class="slideRight" href="">☰</a>
<a id="rightBurger" class="slideLeft" href="">☰</a>
<h1>Off.canvas</h1>
</header>
<div class="scrollableArea">
<!-- Place whatever HTML you want in here -->
<div class="cover floated padded">
<hgroup class="heading padded">
<h2>Presenting</h2>
<h1><span class="pacifico">Off.canvas</span> , for your web application</h1>
</hgroup>
</div>
<div class="floated padded">
<div class="thin">
<h1 class="center">What the funk is it?!</h1>
<p>It's an HTML, CSS and jQuery plugin to kick off your web applications with the 'Off Canvas' style sidebar we know and love from native mobile apps.</p>
<hr/>
<h1 class="center">How do I use it?!</h1>
<p>The Off.canvas jQuery plugin operates on the html tag of your page so in its most basic form you include jQuery and the Off.canvas plugin and CSS files and then run it with:</p>
<pre><code>
$('html').offcanvas();
</code></pre>
<p>This will create an off canvas layout with the default settings providing you supply the following html structure:</p>
<pre><code><aside id="sidebarLeft" class="sidebarLeft">
<div class="scrollableArea">
<!-- Place whatever HTML you want in here -->
</div>
</aside>
<section id="page" class="page">
<header class="topBar">
<a id="leftBurger" class="slideRight" href="">&#9776;</a>
</header>
<div class="scrollableArea">
<!-- Place whatever HTML you want in here -->
</div>
</section></code></pre>
<p>The scrollableArea divs are there to make the content scrollable as the overflow of the page is hidden to allow the off canvas effect to work. I chose not to make the side bar or main page scrollable directly so as to allow for more flexible layout options, such as adding a fixed position top bar like on this page.</p>
<p>The jQuery targets the ids of the side bar and main page, whilst the class names are used by the CSS.</p>
<hr/>
<h3>Still Confused? Try these things...</h3>
<ul class="demo">
<li>
<img src="pictures/menu.png" alt="click or tap"/>
<p>Clicking/tapping the menu icon in the top left</p>
</li>
<li>
<img src="pictures/swipe.png" alt="swipe"/>
<p>Swiping to the right with your finger, or whichever digit you wish</p>
</li>
<li>
<img src="pictures/keyboard.png" alt="right arrow"/>
<p>Hitting the right arrow on your keyboard</p>
</li>
</ul>
<hr/>
<h3>Still Confused, or just want to trigger it for the lulz? Try clicking this button...</h3>
<a class="button huge slideRight" href="">Click meh!!</a>
<hr/>
<h1 class="center">Ok so now you want it, right?</h1>
<br/>
<p class="center">It's still a WIP, but you can <a href="https://github.com/AidanZealley/off.canvas" target="_blank">download the source</a> on GitHub :)</p>
</div>
</div>
</div>
</section>
<aside id="sidebarRight" class="sidebarRight">
<div class="scrollableArea">
<!-- Place whatever HTML you want in here -->
<a class="shutRight" href="">✖</a>
<div class="you padded">
<a href="http://aidanzealley.com/" target="_blank"><img class="avatar" src="pictures/aidan.jpg" alt="Aidan Zealley" width="50"/></a>
<h2><a href="http://aidanzealley.com/" target="_blank">Aidan Zealley</a></h2>
</div>
<ul class="paddedLight">
<li><a class="current" href="index.html"><span class="icon">⌂</span>Home</a></li>
<li><a href="https://github.com/AidanZealley/off.canvas" target="_blank"><span class="social"></span>GitHub Repository</a></li>
<li><a href="leftonly.html"><span class="icon">←</span>Left sidebar only</a></li>
<li><a href="rightonly.html"><span class="icon">→</span>Right sidebar only</a></li>
<li><a href="http://aidanzealley.com/"><span class="icon"></span>aidanzealley.com</a></li>
<li><a href=""><span class="icon"></span>Sign Out</a></li>
</ul>
</div>
</aside>
<script src="js/overthrow.js"></script>
<script src="js/hammer.js"></script>
<script src="js/jquery.hammer.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(["_setAccount", "UA-32925625-1"]);
_gaq.push(["_trackPageview"]);
(function() {
var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>