-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvertical.html
239 lines (198 loc) · 8.14 KB
/
vertical.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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootply.com - Collapsing sidebar drawer menu</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="/bootstrap/img/favicon.ico">
<link rel="apple-touch-icon" href="/bootstrap/img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/bootstrap/img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/bootstrap/img/apple-touch-icon-114x114.png">
<!-- CSS code from Bootply.com editor -->
<style type="text/css">
body {
padding-top: 51px;
}
.text-center {
padding-top: 20px;
}
.col-xs-12 {
background-color: #fff;
}
#sidebar {
height: 100%;
padding-right: 0;
padding-top: 20px;
}
#sidebar .nav {
width: 95%;
}
#sidebar li {
border:0 #f2f2f2 solid;
border-bottom-width:1px;
}
/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -41.6%;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -41.6%;
}
.row-offcanvas-right.active {
right: 41.6%;
}
.row-offcanvas-left.active {
left: 41.6%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 41.6%;
}
#sidebar {
background-color:#3b3b3b;
padding-top:0;
}
#sidebar .nav>li {
color: #ddd;
background: linear-gradient(#3E3E3E, #383838);
border-top: 1px solid #484848;
border-bottom: 1px solid #2E2E2E;
}
#sidebar .nav>li:first-child {
border-top:0;
}
#sidebar .nav>li>a {
color: #ddd;
}
#sidebar .nav>li>a>img {
max-width: 14px;
}
#sidebar .nav>li>a:hover, #sidebar .nav>li>a:focus {
text-decoration: none;
background: linear-gradient(#373737, #323232);
color: #fff;
}
#sidebar .nav .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
#sidebar .nav a:hover .caret{
border-top-color: #fff;
border-bottom-color: #fff;
}
.affix {
width: inherit;
position: fixed;
top: 50px;
}
.affix-bottom {
width: inherit;
position: absolute;
top: auto;
bottom: 200px;
}
}
</style>
</head>
<!-- HTML code from Bootply.com editor -->
<body >
<div class="page-container">
<!-- top navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project Name</a>
</div>
</div>
</div>
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div data-spy="affix" data-offset-top="400" data-offset-bottom="200" class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<!-- main area -->
<div class="col-xs-12 col-sm-9">
<h1>Shrink Width to Collapse Sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus. Fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, a
euismod diam metus eu enim. Nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis.
Nam neque tellus, tristique in est vel, sagittis congue turpis. Aliquam nulla lacus, laoreet dapibus
odio vitae, posuere volutpat magna. Nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim
eleifend. Integer sit amet ante auctor, lacinia sem quis, consectetur nulla.</p>
<p>Vestibulum porttitor massa eget pellentesque eleifend. Suspendisse tempor, nisi eu placerat auctor,
est erat tempus neque, pellentesque venenatis eros lorem vel quam. Nulla luctus malesuada porttitor.
Fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. Quisque facilisis risus
in lacus sagittis malesuada. Suspendisse non purus diam. Nunc commodo felis sit amet tortor
adipiscing varius. Fusce commodo nulla quis fermentum hendrerit. Donec vulputate, tellus sed
venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem.</p>
<p>Fusce sollicitudin lacus lacinia mi tincidunt ullamcorper. Aenean velit ipsum, vestibulum nec
tincidunt eu, lobortis vitae erat. Nullam ultricies fringilla ultricies. Sed euismod nibh quis
tincidunt dapibus. Nulla quam velit, porta sit amet felis eu, auctor fringilla elit. Donec
convallis tincidunt nibh, quis pellentesque sapien condimentum a. Phasellus purus dui, rhoncus
id suscipit id, ornare et sem. Duis aliquet posuere arcu a ornare. Pellentesque consequat libero
id massa accumsan volutpat. Fusce a hendrerit lacus. Nam elementum ac eros eu porttitor.
Phasellus enim mi, auctor sit amet luctus a, commodo fermentum arcu. In volutpat scelerisque
quam, nec lacinia libero.</p>
<p>Aliquam a lacinia orci, iaculis porttitor neque. Nullam cursus dolor tempus mauris posuere, eu
scelerisque sem tincidunt. Praesent blandit sapien at sem pulvinar, vel egestas orci varius.
Praesent vitae purus at ante aliquet luctus vel quis nibh. Mauris id nulla vitae est lacinia
rhoncus a vel justo. Donec iaculis quis sapien vel molestie. Aliquam sed elementum orci.
Vestibulum tristique tempor risus et malesuada. Sed eget ligula sed quam placerat dapibus.
Integer accumsan ac massa at tempus.</p>
</div><!-- /.col-xs-12 main -->
<div style='overflow:hidden; width:200px;'>
<div style='overflow:scroll; width:208px'>
My mousewheel scrollable content here....My mousewheel scrollable content here....My mousewheel scrollable content here....My mousewheel scrollable content here....My mousewheel scrollable content here....
</div>
</div>
</div><!--/.row-->
</div><!--/.container-->
</div><!--/.page-container-->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!-- JavaScript jQuery code from Bootply.com editor -->
<script type='text/javascript'>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
$('#sidebar').affix({
alert("j");
offset: {
top: 100
}
})
});
</script>
</body>
</html>