<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">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">
Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</li>
<li class="list-group-item">
<div>
</div>
</li>
</ul>
</div>
</div>
</div>
#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;
color: #fff;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
#style_switcher ul.list-group li {
background-color: transparent !important;
font-size: 12px;
}
#style_switcher ul.list-group li.list-group-item {
border: none;
padding: 10px 0;
}
#style_switcher ul.list-group li.list-group-item:hover {
background-color: transparent !important;
cursor: pointer;
color: #666;
}
function Colapse_Switcher() {
// Switch theme color
var $styleSwitcher = $('#style_switcher');
if (!$styleSwitcher.hasClass('switcher_open')) {
$styleSwitcher.addClass('switcher_open')
} else {
$styleSwitcher.removeClass('switcher_open')
}
};
