"Menú Lateral Colapsado"
Bootstrap 3.3.0 Snippet by daorva

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container">
<div class="container">
<div class="row">
<div class="jumbotron">
<h1>Menú Lateral</h1>
<p>...</p>
<p>Para modificar de que lado esta el menu se debe cambiar el css #style_switcher, para modficar donde estara la información.</p>
</div>
</div>
<div id="style_switcher" class="">
<a class="switcher_toggle" onclick="Colapse_Switcher();">
<span class="glyphicon glyphicon-filter" aria-hidden="true"></span>
</a>
<div class="style_items">
<ul class="list-group">
<li class="list-group-item">
<div>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
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
#style_switcher {
position: fixed;
z-index: 1000;
top: 100px;
right: -237px;
margin-right: 0;
padding: 15px;
border-width: 1px 0 1px 1px;
border-style: solid;
border-color: #e1e1e1;
border-color: rgba(0,0,0,.2);
background-color: rgba(255,255,255,.9);
width: 237px;
-webkit-transition: all 200ms cubic-bezier(.55,.055,.675,.19);
transition: all 200ms cubic-bezier(.55,.055,.675,.19);
}
#style_switcher.switcher_open {
right: 0;
}
#style_switcher .switcher_toggle {
position: absolute;
left: -37px;
top: 10px;
width: 36px;
height: 36px;
line-height: 36px;
padding-left: 10px;
border-width: 1px 0 1px 1px;
border-style: solid;
border-color: #e1e1e1;
border-color: rgba(0,0,0,.1);
background: rgba(0,0,0,.9);
font-size: 20px;
cursor: pointer;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
function Colapse_Switcher() {
// Switch theme color
var $styleSwitcher = $('#style_switcher');
if (!$styleSwitcher.hasClass('switcher_open')) {
$styleSwitcher.addClass('switcher_open')
} else {
$styleSwitcher.removeClass('switcher_open')
}
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

BLK• Design System
navbar lateral slide menu

Questions / Comments: