<section class="bg-primary">
<div class="container">
<!-- START NAVBAR -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-offcanvas">
<a class="navbar-brand mr-auto" href="#">Offcanvas navbar - toggle always visible</a>
<!-- If you want to show the button online on mobile use this toggle
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
-->
<!-- This toggle button is always visible -->
<button class="navbar-toggler d-block" type="button" id="navToggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Switch account</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- END NAVBAR -->
</div>
<!--/.container -->
</section>
<section>
<div class="container py-3">
This demo is a remix of the <a href="http://getbootstrap.com/docs/4.1/examples/offcanvas/">off canvas example</a> on the Bootstrap 4 documentation.
</div>
</section>
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
/* since the navbar is fixed we need to add some space to the body */
body {
padding-top: 56px;
}
.offcanvas-collapse {
position: fixed;
top: 56px; /* Height of navbar */
bottom: 0;
right: 100%;
left:-300px;
width: 300px;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
visibility: hidden;
background-color: #343a40;
transition-timing-function: ease-in-out;
transition-duration: .3s;
transition-property: left, visibility;
}
.offcanvas-collapse {
align-items:start;
/* Adds a subtle drop shadow */
-moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
border-right:5px solid rgba(0, 0, 0, 0.2);
}
/* Makes the nav visibile with the open class */
.offcanvas-collapse.open {
left: 0;
visibility: visible;
}
.navbar-expand-lg .navbar-nav {
-ms-flex-direction: column;
flex-direction: column;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
color: rgba(255, 255, 255, .75);
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-underline .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
color: #6c757d;
}
.nav-underline .nav-link:hover {
color: #007bff;
}
.nav-underline .active {
font-weight: 500;
color: #343a40;
}
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
$('[data-toggle="offcanvas"], #navToggle').on('click', function () {
$('.offcanvas-collapse').toggleClass('open')
})
// document ready
});
window.onload = function() {
// executes when complete page is fully loaded, including all frames, objects and images
console.log("window is loaded");
// window load
};
