-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
146 lines (140 loc) · 6.78 KB
/
example.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/component-slidebars.min.css" rel="stylesheet">
</head>
<body>
<div canvas="container">
<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark offcanvas-desktop">
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu 1
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu 2
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu 3
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More...
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown4">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item text-danger" href="#">Sign out</a>
</div>
</li>
</div>
</nav>
<main class="container">
<section>
<h1>Hello world!</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</section>
</main>
</div>
<nav canvas="mobile" class="offcanvas fixed-top navbar-dark bg-dark">
<div class="row no-gutters">
<div class="col text-left">
<button class="navbar-toggler navbar-toggle-offcanvas-left">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="col-8 text-center">
<h5 class="w-100 text-light text-truncate m-0 pt-2">Title</h5>
</div>
<div class="col text-right">
<button class="navbar-toggler navbar-toggle-offcanvas-right">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
<div off-canvas="offcanvas-left left reveal" class="container p-3">
<h6>Menu 1</h6>
<ul class="nav flex-column">
<li class="nav-item">
<a href="#" class="nav-link">Action</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Another action</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Something else here</a>
</li>
</ul>
<h6>Menu 2</h6>
<ul class="nav flex-column">
<li class="nav-item">
<a href="#" class="nav-link">Action</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Another action</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Something else here</a>
</li>
</ul>
<h6>Menu 3</h6>
<ul class="nav flex-column">
<li class="nav-item">
<a href="#" class="nav-link">Action</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Another action</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Something else here</a>
</li>
</ul>
</div>
<div off-canvas="offcanvas-right right reveal h-100" class="container">
<div class="fixed-top text-center p-3">
Brand
</div>
<div class="fixed-bottom text-center p-3">
<a href="#" class="btn btn-outline-primary btn-block">Action</a>
<a href="#" class="btn btn-outline-danger btn-block">Sign out</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="node_modules/slidebars/dist/slidebars.min.js"></script>
<script src="dist/js/component-slidebars.min.js"></script>
</body>
</html>