<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">
<nav class="custom-menu">
<figure class="menu-image">
<span class="overlay-image"></span>
<img src="https://images.pexels.com/photos/3489130/pexels-photo-3489130.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
</figure>
<div class="menu-container">
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Team & Tools</a></li>
<li><a href="#">Diensten</a></li>
<li><a href="#">Actua</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Portaalinfo</a></li>
<li><a href="#">Contact</a></li>
<li><br></li>
<li><a href="#"><i class="material-icons">lock</i>Portaal login</a></li>
</ul>
</div>
</nav>
<header class="globNav">
<div class="fluid-container">
<div class="logo left-element">
<a href="#">
<img style="height: 56px" src="https://www.flaticon.com/svg/vstatic/svg/4053/4053319.svg?token=exp=1613512813~hmac=72782d4370306561ff4033da40915084" alt="Logo">
</a>
</div>
<div class="right-element">
<div class="button-container">
<button toggle-menu>
<div class="button-inner"></div>
</button>
</div>
</div>
</div>
</header>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script>
var header = $('.globNav');
var customMenu = $('.custom-menu');
if(customMenu.length){
var btnMenu = $('*[toggle-menu]');
console.log('custom menu active');
var duration = 1;
var menuImage = $('.menu-image img');
var menuOverlayImage = $('.menu-image .overlay-image');
var menuLinks = $('.custom-menu ul li a');
var menuLinksHeight = menuLinks.outerHeight();
var menuToggle = new TimelineMax({pause:true});
menuToggle.set(menuLinks, { y: menuLinksHeight});
menuToggle.to(customMenu, duration / 2, {
width:'100%',
ease:Power3.easeInOut,
});
menuToggle.to(menuOverlayImage, duration, {
width: 0,
ease: Power3.easeInOut,
});
menuToggle.to(menuImage, duration, {
scale: 1,
ease: Power3.easeInOut,
}, '-=' + duration);
menuToggle.staggerTo(menuLinks, duration, {
y:0,
opacity:1,
ease: Power3.easeInOut,
}, 0.05, '-=' + duration);
menuToggle.reverse();
function toggleMenu() {
menuToggle.reversed( !menuToggle.reversed() );
}
btnMenu.on('click', function(){
toggleMenu();
btnMenu.toggleClass('active');
customMenu.toggleClass('active');
});
}
</script>
body{
background-color:#d2dae2;
}
.custom-menu {
position: fixed;
display: flex;
flex-wrap: wrap;
flex-direction: row;
z-index: 95;
height: 100%;
background-color: white;
overflow: hidden;
right: 0;
width: 0;
}
.custom-menu .menu-image {
position: relative;
width: 50%;
overflow: hidden;
}
.custom-menu .menu-image .overlay-image {
position: absolute;
width: 100%;
height: 100%;
right: 0;
background-color: white;
z-index: 5;
}
.custom-menu .menu-image img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.2);
}
.custom-menu .menu-container {
position: relative;
padding: 4rem;
flex: 1;
display: flex;
align-items: center;
}
.custom-menu .menu-container ul {
position: relative;
}
.custom-menu .menu-container ul li {
position: relative;
overflow: hidden;
font-size: 2rem;
font-weight: 600;
color: #666;
font-family: 'Open Sans', sans-serif;
margin-bottom:1rem;
}
.custom-menu .menu-container ul li.current {
color: #151515;
}
.custom-menu .menu-container ul li a {
color: inherit;
position: relative;
text-decoration: none;
display: inline-block;
opacity: 0;
}
.custom-menu .menu-container ul li a i {
position: relative;
}
.globNav {
position: fixed;
z-index: 100;
width: 100%;
}
.globNav .fluid-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-left: 4rem;
padding-right: 4rem;
}
@media only screen and (max-width: 540px) {
.globNav .fluid-container {
padding-left: 2rem;
padding-right: 2rem;
}
}
.globNav .fluid-container .logo a {
display: block;
overflow: hidden;
}
.globNav .fluid-container .logo a img {
box-sizing: content-box;
max-height: 6rem;
display: block;
padding: 2rem 5px;
width:100%;
-webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
@media only screen and (max-width: 540px) {
/* line 68, sass/_layout/_header.scss */
.globNav .fluid-container .logo a img {
max-height: 4rem;
padding: 1.5rem 5px;
}
}
/* line 85, sass/_layout/_header.scss */
.globNav .fluid-container .right-element {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 1rem 0;
}
/* line 95, sass/_layout/_header.scss */
.globNav .fluid-container .right-element .button-container {
border-radius: 1rem;
overflow: hidden;
}
@media only screen and (max-width: 540px) {
/* line 95, sass/_layout/_header.scss */
.globNav .fluid-container .right-element .button-container {
border-radius: 0;
}
}
/* line 102, sass/_layout/_header.scss */
.globNav .fluid-container .right-element .button-container button {
border: none;
width: 4rem;
height: 4rem;
padding: 0;
background-color: transparent;
cursor: pointer;
outline: none;
position: relative;
}
@media only screen and (max-width: 540px) {
/* line 102, sass/_layout/_header.scss */
.globNav .fluid-container .right-element .button-container button {
width: 2rem;
height: 2rem;
}
}
/* line 120, sass/_layout/_header.scss */
.globNav .fluid-container .right-element .button-container button.active .button-inner {
background-color: #353535;
}
/* line 123, sass/_layout/_header.scss */
.globNav .fluid-container .right-element .button-container button.active .button-inner::before {
top: 0;
left: 0;
}
/* line 127, sass/_layout/_header.scss */
.globNav .fluid-container .right-element .button-container button.active .button-inner::after {
bottom: 0;
left: 1rem;
}
/* line 132, sass/_layout/_header.scss */
.globNav .fluid-container .right-element .button-container button.active .button-inner::after,
.globNav .fluid-container .right-element .button-container button.active .button-inner::before {
opacity: 0;
}
/* line 138, sass/_layout/_header.scss */
.globNav .fluid-container .right-element .button-container button .button-inner,
.globNav .fluid-container .right-element .button-container button .button-inner::after,
.globNav .fluid-container .right-element .button-container button .button-inner::before {
position: absolute;
width: 2rem;
height: 3px;
transition-timing-function: ease;
transition-duration: 350ms;
background-color: #000;
left: 1rem;
display: block;
}
@media only screen and (max-width: 540px) {
/* line 138, sass/_layout/_header.scss */
.globNav .fluid-container .right-element .button-container button .button-inner,
.globNav .fluid-container .right-element .button-container button .button-inner::after,
.globNav .fluid-container .right-element .button-container button .button-inner::before {
left: 0;
height: 2px;
}
}
/* line 154, sass/_layout/_header.scss */
.globNav .fluid-container .right-element .button-container button .button-inner::after,
.globNav .fluid-container .right-element .button-container button .button-inner::before {
content: '';
}
/* line 158, sass/_layout/_header.scss */
.globNav .fluid-container .right-element .button-container button .button-inner::before {
top: -10px;
}
/* line 161, sass/_layout/_header.scss */
.globNav .fluid-container .right-element .button-container button .button-inner::after {
bottom: -10px;
}
