<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
<div class="row d-flex d-md-block flex-nowrap wrapper">
<div id="sideNavigation" class="col-sm-12 float-left px-0 pt-0">
<div class="nav-side-menu">
<div class="text-right">
<button type="button" class="btn btn-link btn-sm text-white" onclick="closeNav()"
title="Cerrar menú"><h4>×</h4></button>
</div>
<div class="brand"><h4>Brand Logo</h4></div>
<div class="brand">
<div class="logo">
<img src="http://lorempixel.com/output/people-q-g-64-64-1.jpg"
class="img-responsive center-block" alt="Logo">
</div>
</div>
<div class="menu-list">
<ul class="menu-content">
<li>
<a href="#">
<i class="fas fa-tachometer-alt fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<a href="#"><i class="fab fa-studiovinari fa-lg"></i> UI Elements <span
class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active"><a href="#">CSS3 Animation</a></li>
<li><a href="#">General</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Tabs & Accordions</a></li>
<li><a href="#">Typography</a></li>
<li><a href="#">FontAwesome</a></li>
<li><a href="#">Slider</a></li>
<li><a href="#">Panels</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Bootstrap Model</a></li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<a href="#"><i class="fab fa-fort-awesome-alt fa-lg"></i> Services <span
class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<a href="#"><i class="fab fa-pagelines fa-lg"></i> New <span class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#">
<i class="fas fa-user-tie fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main" class="col-sm-12 float-left px-2 pt-2">
<button id="btnOpenNav" type="button" class="btn btn-link" onclick="openNav()" title="Abrir menú"><i
class="fas fa-bars fa-2x py-2 p-1"></i></button>
<div class="page-header">
<h2>Bootstrap 4 Sidebar Menu</h2>
</div>
<p class="lead">A responsive, multi-level vertical accordion.</p>
<hr>
<div class="row">
<div class="col-md-6">
<button role="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo" aria-expanded="true">
horizontal collapsible
</button>
<div id="demo" class="width collapse show" aria-expanded="true">
<div class="list-group" style="width: 400px;">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-md-6">
<button role="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo2" aria-expanded="true">
vertical collapsible
</button>
<div id="demo2" class="height collapse show" aria-expanded="true">
<div>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/*@charset "ISO-8859-1";*/
@import url("https://use.fontawesome.com/releases/v5.0.11/css/all.css");
body{
min-height:1024px;
}
/* The side navigation menu */
#sideNavigation {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #23282e;
overflow-x: hidden; /* Disable horizontal scroll */
padding: 0px;
transition: 0.5s; /* 0.5 second transition effect to slide in the sideNavigation */
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
/*padding: 20px;*/
overflow: hidden;
width: 100%;
}
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: transparent;
padding-left: 0px;
height: 100%;
color: #e1ffff;
/*width:100%;*/
}
.nav-side-menu .menu-content {
background-color: #23282e;
padding-bottom: 30px;
}
.nav-side-menu .brand {
text-align: center;
font-size: 32px;
padding-left: 20px;
padding-top: 15px;
line-height: 50px;
display: block;
background-color: #23282e;
}
.nav-side-menu .brand .logo {
max-height: 130px;
padding-bottom: 30px;
}
.nav-side-menu .brand .logo > img {
margin-top: 30px;
padding: 3px;
border: 3px solid white;
border-radius: 100%;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
background-color: #2e353d;
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: 'Font Awesome 5 Free';
content: "\f139";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
font-weight: 900;
}
.nav-side-menu ul .collapsed .arrow::before,
.nav-side-menu li .collapsed .arrow::before {
font-family: 'Font Awesome 5 Free';
content: "\f13a";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
font-weight: 900;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
background-color: #346489;
color: #ffffff;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #ffffff;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #4f5b69;
/*background-color: #424949;*/
color: #ffffff;
}
.nav-side-menu ul .sub-menu li.active:hover,
.nav-side-menu li .sub-menu li.active:hover {
background-color: #346489;
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: 'Font Awesome 5 Free';
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
font-weight: 900;
}
.nav-side-menu ul .sub-menu li.active:before,
.nav-side-menu li .sub-menu li.active:before {
font-family: 'Font Awesome 5 Free';
content: "\f0da";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
font-weight: 900;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #84a3c6;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
/* -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;*/
}
function openNav() {
document.getElementById("sideNavigation").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("btnOpenNav").style.display = "none";
}
function closeNav() {
document.getElementById("btnOpenNav").style.display = "inline-block";
document.getElementById("sideNavigation").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
$(function () {
openNav();
});
