<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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="wrapper"> <!-- Sidebar Holder --> <nav id="sidebar"> <div class="sidebar-header"> <h3>Bootstrap Sidebar</h3> </div> <ul class="list-unstyled components"> <p>Dummy Heading</p> <li class="active"> <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Home</a> <ul class="collapse list-unstyled" id="homeSubmenu"> <li><a href="#">Home 1</a></li> <li><a href="#">Home 2</a></li> <li><a href="#">Home 3</a></li> </ul> </li> <li> <a href="#">About</a> <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a> <ul class="collapse list-unstyled" id="pageSubmenu"> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </li> <li> <a href="#">Portfolio</a> </li> <li> <a href="#">Contact</a> </li> </ul> <ul class="list-unstyled CTAs"> <li><a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a></li> <li><a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a></li> </ul> </nav> <!-- Page Content Holder --> </div> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <!-- Bootstrap Js CDN --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- jQuery Custom Scroller CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

/* DEMO STYLE */ @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"; a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; } .navbar { padding: 15px 10px; background: #fff; border: none; border-radius: 0; margin-bottom: 40px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } .navbar-btn { box-shadow: none; outline: none !important; border: none; } .line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; margin: 40px 0; } /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */ #sidebar { width: 250px; position: fixed; top: 0; left: 0; height: 100vh; z-index: 999; background: #7386D5; color: #fff; transition: all 0.3s; } #sidebar.active { margin-left: -250px; } #sidebar .sidebar-header { padding: 20px; background: #6d7fcc; } #sidebar ul.components { padding: 20px 0; border-bottom: 1px solid #47748b; } #sidebar ul p { color: #fff; padding: 10px; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a:hover { color: #7386D5; background: #fff; } #sidebar ul li.active > a, a[aria-expanded="true"] { color: #fff; background: #6d7fcc; } a[data-toggle="collapse"] { position: relative; } a[aria-expanded="false"]::before, a[aria-expanded="true"]::before { content: '\e259'; display: block; position: absolute; right: 20px; font-family: 'Glyphicons Halflings'; font-size: 0.6em; } a[aria-expanded="true"]::before { content: '\e260'; } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #6d7fcc; } ul.CTAs { padding: 20px; } ul.CTAs a { text-align: center; font-size: 0.9em !important; display: block; border-radius: 5px; margin-bottom: 5px; } a.download { background: #fff; color: #7386D5; } a.article, a.article:hover { background: #6d7fcc !important; color: #fff !important; } /* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */ #content { width: calc(100% - 250px); padding: 40px; min-height: 100vh; transition: all 0.3s; position: absolute; top: 0; right: 0; } #content.active { width: 100%; } /* --------------------------------------------------- MEDIAQUERIES ----------------------------------------------------- */ @media (max-width: 768px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0; } #content { width: 100%; } #content.active { width: calc(100% - 250px); } #sidebarCollapse span { display: none; } }

$(document).ready(function () { $("#sidebar").mCustomScrollbar({ theme: "minimal" }); $('#sidebarCollapse').on('click', function () { $('#sidebar, #content').toggleClass('active'); $('.collapse.in').toggleClass('in'); $('a[aria-expanded=true]').attr('aria-expanded', 'false'); }); });