Flyout Overlay with CSS & Javascript

Building on from 2 previous posts on overly flyout content and animating hamburger icons – I did one more code example with a more minimal approach. The initial same approach is required with 2 x rows of content, one static and the other designated as the overlay flyout with a class of .overlay

The toggle sits above both static and overlay with a high z-index and javascript is used to toggle 2 classes that animate the toggle and control the flyout content.

The toggle HTML uses the code from the animating icons site…

<button class="hamburger hamburger--3dx" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
<span class="hamburger-label">Menu</span>
</button>

The toggle is given a high z-index so it sits above the overlay, the CSS includes the 3DX effect

/* Toggle */

.fl-page button.hamburger {
	z-index: 99999;
	border: none;
	background: none;
	border-radius: 0;
	position: relative;
	display: flex;
	justify-content: center;
}

.hamburger-label {
	font-weight: 600;
	display: inline-block;
	margin-left: 5px;
	text-transform: uppercase;
	color: #000 !important;
	align-self: center;
	font-size: 20px;

}

.hamburger{
	/* Control the size of the hamburger */
        transform: scale(.9);
}

/* # Overlay
---------------------------------------------------------------------------------------------------- */

.admin-bar .overlay {
	top: 32px; /* Header + admin bar  - in this case 128px + 32px */
}

/* See the Overlay in BB editing mode */
.fl-theme-layout-template-default .overlay {
	height: auto;
        width: auto;
	position: relative; 
	right: 0;
	top: 0;
	z-index: 0;
	overflow-y: visible;
}

/* The Overlay (background) how it appears when toggled*/
.overlay {
	/* Height & width depends on how you want to reveal the overlay slide down or slide in */    
	height: 0%; /* Width or Height of overlay set at 0 is controlled in the .overlay-active .overlay Class below */
	width: 100%;
	position: fixed; 
	z-index: 1; /* Sit on top */
	right: 0;
	top: 0; /* How far from the top of the page to appeat - here the header is fixed at 128px */
	background-color: rgba(0,0,0, .5); /* Overlay bg */
	overflow-y: hidden; /* Disable horizontal scroll */
	transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}


.overlay .fl-row-fixed-width {
	max-width: none;
}

.overlay-active .overlay {
	height: 100vh !important; /* Set the overlay height */
}


/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
 .hamburger {
	padding: 15px 15px;
	display: inline-block;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible; 
}

.hamburger:hover {
	opacity: 0.7; 
}
.hamburger.is-active:hover {
	opacity: 0.7; 
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
	background-color: #000; 
}

.hamburger-box {
	width: 40px;
	height: 24px;
	display: inline-block;
	position: relative; 
}

.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px; 
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	width: 40px;
	height: 4px;
	background-color: #000;
	border-radius: 4px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease; 
}

.hamburger-inner::before, .hamburger-inner::after {
	content: "";
	display: block; 
}

.hamburger-inner::before {
	top: -10px; 
}

.hamburger-inner::after {
	bottom: -10px; 
}

/*
 * 3DX
 */
.hamburger--3dx .hamburger-box {
	perspective: 80px; 
}

.hamburger--3dx .hamburger-inner {
	transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 
}
.hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
	transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dx.is-active .hamburger-inner {
	background-color: transparent !important;
	transform: rotateY(180deg); 
}
.hamburger--3dx.is-active .hamburger-inner::before {
	transform: translate3d(0, 10px, 0) rotate(45deg); 
}
.hamburger--3dx.is-active .hamburger-inner::after {
	transform: translate3d(0, -10px, 0) rotate(-45deg); 
}
  

To use another effect just swap in the appropriate CSS

Add in the Javascript…

overlayjs();

function overlayjs() {
    // Look for .hamburger & body
    var hamburger = document.querySelector(".hamburger");
    var body = document.querySelector("body");

    // On click
    hamburger.addEventListener("click", function() {
    // Toggle class "is-active"
    hamburger.classList.toggle("is-active");
    // Add body class to control overlay
    body.classList.toggle("overlay-active");
    });
}  

BB Themer header layout example with code in place.