"Shoji Layout: Slide-in Side Panels for XS Viewports"
Bootstrap 3.2.0 Snippet by i-heart-php

Post to Facebook Tweet this

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="shoji" id="shoji">
<div class="shoji-rail">
<div class="shoji-panel shoji-panel-left">
<div class="panel-group" id="sidebar">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#sidebar" href="#sidebar-first">Menu 1</a>
</h4>
</div>
<ul id="sidebar-first" class="list-group panel-collapse collapse">
<li class="list-group-item"><a href="#">Menu Item 1</a></li>
<li class="list-group-item"><a href="#">Menu Item 2</a></li>
<li class="list-group-item"><a href="#">Menu Item 3</a></li>
</ul>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#sidebar" href="#sidebar-second">Menu 2</a>
</h4>
</div>
<ul id="sidebar-second" class="list-group panel-collapse collapse">
<li class="list-group-item"><a href="#">Menu Item 1</a></li>
<li class="list-group-item"><a href="#">Menu Item 2</a></li>
<li class="list-group-item"><a href="#">Menu Item 3</a></li>
</ul>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#sidebar" href="#sidebar-third">Menu 3</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
.shoji { overflow-x: hidden; }
.shoji > .shoji-rail {
height: 0;
position: absolute;
width: 100%;
}
.shoji > .shoji-rail > .shoji-panel {
display: none;
width: 265px;
}
.shoji > .shoji-rail > .shoji-panel.shoji-panel-left { float: left !important; }
.shoji > .shoji-rail > .shoji-panel.shoji-panel-right { float: right !important; }
.shoji > .shoji-door { position: relative; }
.navbar-toggle-left,
.navbar-toggle-right {
margin: 5px;
}
.navbar-toggle-left { float: left !important; }
.navbar-toggle-right { float: right !important; }
.navbar-banner {
position: absolute;
width: 100%;
text-align: center;
}
.navbar-banner > .navbar-brand {
float: none !important;
line-height: 50px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
Direction = {
LEFT : 'left',
RIGHT : 'right'
}
Shoji = function(element) {
this.offset = 0;
var shoji = $(element)
var door = shoji.find('.shoji-door');
this.getDoor = function() { return door; };
var leftPanel = shoji.find('.shoji-panel-left');
this.getLeftPanel = function() { return leftPanel; };
var rightPanel = shoji.find('.shoji-panel-right');
this.getRightPanel = function() { return rightPanel; };
};
Shoji.prototype.slide = function(direction, width, duration, complete) {
var operator;
var offset;
switch (direction) {
case Direction.LEFT:
operator = '-=';
offset = -width;
break;
case Direction.RIGHT:
operator = '+=';
offset = width;
break;
default:
return;
}
this.getDoor().animate({ left: operator + width }, duration, 'linear', complete);
this.offset += offset;
};
Shoji.prototype.toggle = function(direction, duration) {
var offset = this.offset;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard React
social network layout - bootstrap 4
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)
Portlets (like panels)

Questions / Comments: