forked from clineamb/bootstrap-drawer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (105 loc) · 6.16 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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bootstrap-drawer example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-drawer.css">
<style>
body, body * {
font-family: 'Open Sans', Arial, sans-serif;
}
#drawer-page {
padding-top: 20px;
padding-bottom: 20px;
}
</style>
</head>
<body class="has-drawer">
<div id="drawerExample" class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold" aria-labelledby="drawerExample">
<div class="drawer-controls">
<a href="#drawerExample" data-toggle="drawer" href="#drawerExample" aria-foldedopen="false" aria-controls="drawerExample" class="btn btn-primary btn-sm">Menu</a>
</div>
<div class="drawer-contents">
<div class="drawer-heading">
<h2 class="drawer-title">Menu</h2>
</div>
<ul class="drawer-nav">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<div class="drawer-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a href="#">A Regular Link</a>
</div>
<div class="drawer-footer locked text-center">
<small>© Caroline Amaba</small>
</div>
</div>
</div>
<div id="drawer-page" class="container">
<div class="jumbotron">
<h1>Bootstrap Off-Canvas</h1>
<p>The more common name for a drawer menu, I learned, is "off-canvas"; but, that name was taken for other packages that also did this. Even so, the current bootstrap package (3.2.2) doesn't have any off-canvas elements by default even though it is becoming a growing mobile design trend. Granted, this might change in the future, but - hey - I made this for now.</p>
<p>This page contains a basic example of how to use the full page. See the <a href="http://clineamb.github.io/bootstrap-drawer" target="_blank">documentation page</a> for more details and more examples!</p>
<p>If you have any issues or questions, please <a href="https://github.com/clineamb/bootstrap-drawer/issues" target="_blank">check out out the repo and drop an issue</a>.
<p>The toggle below uses the programmatic javascript API to help demo that feature.</p>
<p><a id="other-toggle" class="btn btn-primary btn-lg" href="#" role="button">Another Toggle!</a></p>
</div>
<div class="panel panel-default has-inner-drawer" style="height: 500px; z-index: 500">
<div id="drawerExample2" class="drawer drawer-inside dw-xs-5 fold" aria-labelledby="drawerExample2">
<div class="drawer-controls">
<a href="#drawerExample2" data-toggle="drawer" href="#drawerExample2" aria-foldedopen"false" aria-controls="drawerExample2" class="btn btn-primary btn-sm">Menu</a>
</div>
<div class="drawer-contents">
<div class="drawer-heading">
<h2 class="drawer-title">Menu</h2>
</div>
<ul class="drawer-nav">
<li role="presentation" class="active"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
</ul>
<div class="drawer-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a href="#">A Regular Link</a>
</div>
<div class="drawer-footer locked text-center">
<small>© Caroline Amaba</small>
</div>
</div>
</div>
<div class="panel-body" style="padding-left: 10%">
<p>You can also use panels inside of other elements that have
a defined with and height.</p>
<p>You'll have to be responsible for making sure your controls accessible.</p>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery.min.js"><\/script>')</script>
<script src="bootstrap.min.js"></script>
<script src="drawer.js"></script>
<script>
$('#drawerExample').drawer({ toggle: false });
$('#other-toggle').click(function() {
$('#drawerExample').drawer('toggle');
return false;
});
</script>
</body>
</html>