A jQuery script for Bootstrap 4 that enables a hamburger button to toggle an animated, pretty nice, and fully responsive fullscreen navigation on your Bootstrap project.
<link rel="stylesheet" href="/path/to/bootstrap.min.css" />
<script src="/path/to/jquery.min.js"></script>
2 Insert as many menu items to the fullscreen overlay navigation.
<div class="menuContainer">
<div class="menuWrapper">
<div class="container-fluid h-100">
<div class="row h-100">
<div class=" col-md-4 px-0 linkWrap">
<a
href="#"
class="link nav-link d-flex h-100 flex-lg-column align-items-center justify-content-lg-center bg-indigo text-indigo-lighter"
>
<div class="icon"><i class="fas fa-couch"></i></div>
<div class="text">Furniture</div>
</a>
</div>
<div class=" col-md-4 px-0 linkWrap">
<a
href="#"
class="link nav-link d-flex h-100 flex-lg-column align-items-center justify-content-lg-center bg-orange text-orange-lighter"
>
<div class="icon"><i class="fas fa-mobile-alt"></i></div>
<div class="text">Mobiles</div>
</a>
</div>
</div>
</div>
</div>
</div>
3. Create a hamburger button to toggle the navigation.
<button class="navbar-toggler trigger">
<span class="navbar-toggler-icon"></span>
</button>
4 Make the navigation fullscreen.
.menuContainer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
margin-top: 56px;
z-index: 4;
visibility: hidden;
-webkit-transform: scale(0);
transform: scale(0);
}
.menuContainer.active {
visibility: visible;
-webkit-transform: scale(1);
transform: scale(1);
}
.menuContainer.active .linkWrap {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all ease 0.25s;
transition: all ease 0.25s;
min-height: 12.5rem;
}
.menuContainer.active .linkWrap:nth-child(1) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.menuContainer.active .linkWrap:nth-child(2) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
$(document).ready(function() {
var set[Menu](https://www.jqueryscript.net/menu/)Height = function() {
$('.menuWrapper').slimscroll({
height: document.documentElement.clientHeight - 56
});
};
$('.trigger').on('click', function() {
$('.menuContainer').toggleClass('active');
});
setMenuHeight();
$(window).resize(function() {
setMenuHeight();
});
});
Author: frontendfunn
Live Demo: https://frontendfunn.github.io/fullscreen-overlay-navigation-menu/
GitHub: https://github.com/frontendfunn/fullscreen-overlay-navigation-menu
#javascript #bootstrap 4 #bootstrap #jquery