<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">Accesos</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>
</h4>
</div>
<ul id="sidebar-third" 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>
</div>
<div class="shoji-panel shoji-panel-right">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Configuración</a></li>
<li><a href="#">Ayuda</a></li>
<li><a href="#">Cerrar Sessión</a></li>
</ul>
</div>
</div>
<div class="shoji-door">
<div class="content">
<nav class="navbar navbar-default square" role="navigation" id="navbar">
<div class="navbar-banner">
<a href="#" class="navbar-brand">Sistema de Gestión de Documentos Autenticados</a>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle navbar-toggle-left" data-slide="right">
<i class="glyphicon glyphicon-th-large"></i>
</button>
<button type="button" class="navbar-toggle navbar-toggle-right" data-slide="left">
<i class="glyphicon glyphicon-cog"></i>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Bienvenido <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Configuración</a></li>
<li class="divider" />
<li><a href="#">Ayuda</a></li>
<li><a href="#">Cerrar Sessión</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="hidden-xs col-sm-4">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Gestión de Usuarios</h4>
</div>
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Registrar Usuario</a></li>
<li><a href="#">Modificar Usuario</a></li>
<li><a href="#">Eliminar Usuario</a></li>
</ul>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Gestión de Documentos</h4>
</div>
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Registrar Documentos</a></li>
<li><a href="#">Modificar Documentos</a></li>
<li><a href="#">Eliminar Registro de Documentos</a></li>
</ul>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Verificación de Documentos</h4>
</div>
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Consulta de Documentos</a></li>
<li><a href="#">Historial de Registro</a></li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-8"> //area de trabajo para formularios
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
body { background-color: lightgrey; }
.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;
}
.square { border-radius: 0 !important; }
.content { background-color: white; }
