We Keep Coding

Can I make this menu animation smoother?

I'm trying to turn my menu into an X shape with animations. Here's a video of what it currently looks like.
Video
I want to make it more smooth and actually make the cross symmetrical.
I have create a code snippet with all the relevant code below.
const NAV_BTN = document.querySelector('.navmenu');
const NL_1 = document.querySelector('.l1');
const NL_2 = document.querySelector('.l2');
const NL_3 = document.querySelector('.l3');
NAV_BTN.addEventListener('click', () => {
navToClose();
});
const navToClose = () => {
NL_1.style.animation = '0.5s l1Close forwards';
NL_2.style.animation = '0.5s l2Close forwards';
NL_3.style.animation = '0.5s l3Close forwards';
};
.container{
height: 200px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.navmenu {
transition: all 0.5s;
}
.nline{
width: 40px;
height: 4px;
border-radius: 0.5px;
background-color: white;
margin-top: 5px;
margin-bottom: 5px;
}
.l1 {
width: 20px;
transition: all 0.5s;
}
.l3 {
width: 20px;
transition: all 0.5s;
margin-left: auto;
}
.navmenu:hover>.l1,
.navmenu:hover>.l3 {
width: 40px;
}
.navmenu:hover {
opacity: 0.5;
cursor: pointer;
}
/* ANIMATIONS */
#keyframes l1Close{
0%{
transform: rotate(0deg);
margin: 0;
}
100%{
transform: translate(0,0) rotate(-45deg);
width: 40px;
}
}
#keyframes l2Close{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
#keyframes l3Close{
0%{
transform: rotate(0deg);
}
100%{
transform: translate(0,0) rotate(45deg);
width: 40px;
}
}
<div class="container">
<div class="navmenu">
<div class="nline l1"></div>
<div class="nline l2"></div>
<div class="nline l3"></div>
</div>
</div>
I would appreciate any help, and will reply if you have any questions.
Thanks.

The following code should be close enough to the solution you are aiming for. The transition can be modified according to your needs and the seconds must be adapted accordingly.
.container{
height: 200px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.navmenu {
transition: all 0.8s;
}
.nline{
width: 40px;
height: 4px;
border-radius: 0.5px;
background-color: white;
margin-top: 5px;
margin-bottom: 5px;
}
.l1 {
width: 20px;
transition: all 0.5s linear;
}
.l2 {
width: 40px;
transition: all 0.3s linear;
}
.l3 {
width: 20px;
transition: all 0.5s linear;
margin-left: auto;
}
.navmenu:hover>.l1 {
width: 40px;
position: relative;
top: 7px;
transform: rotate(-45deg);
}
.navmenu:hover>.l3 {
width: 40px;
position: relative;
top: -7px;
transform: rotate(45deg);
}
.navmenu:hover>.l2 {
height: 1.5px;
opacity:0;
}
.navmenu:hover {
opacity: 0.5;
cursor: pointer;
}
<div class="container">
<div class="navmenu">
<div class="nline l1"></div>
<div class="nline l2"></div>
<div class="nline l3"></div>
</div>
</div>

CSS and JS issue

Hello I have problem with that code, I want to make sidebar when she going in everything is ok but when I press burger button again
the block does not animate.
Code here:
https://pastebin.pl/view/74464f3c

You left out your animation keyframes in css, and also a few things in your .hide class, take a look ;) :
const burger = document.querySelector(".burger");
let a = document.querySelector(".nav");
let b = 0;
burger.addEventListener("click", function() {
burger.classList.toggle("active");
if (burger.classList.contains("active") == true) {
document.querySelector(".nav").classList.add("show");
document.querySelector(".nav").classList.remove("hide");
b++;
} else if (b == 1) {
document.querySelector(".nav").classList.toggle("show");
document.querySelector(".nav").classList.add("hide");
b--;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Condensed', sans-serif;
}
body {
display: flex;
flex-direction: row;
}
.burger {
position: fixed;
top: 30px;
right: 30px;
width: 60px;
height: 45px;
transition: .2s;
cursor: pointer;
}
.burger.active {
transform: rotate(-90deg);
}
.burger span {
position: absolute;
width: 100%;
height: 10px;
background-color: black;
left: 0;
transition: top .2s .2s, bottom .2s .2s, opacity .2s .2s, transform .2s .4s;
}
.burger span:nth-child(1) {
top: 0
}
.burger.active span:nth-child(1) {
top: calc(50% - 5px);
transform: rotate(45deg);
}
.burger span:nth-child(2) {
top: calc(50% - 5px);
}
.burger.active span:nth-child(2) {
opacity: 0;
}
.burger span:nth-child(3) {
bottom: 0;
}
.burger.active span:nth-child(3) {
bottom: calc(50% - 5px);
transform: rotate(-45deg);
}
.nav {
display: none;
height: 100vh;
width: 15vw;
background-color: #3652f5;
text-align: center;
font-size: 100%;
}
ul,
ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
ul li {
font-size: 2em;
margin-bottom: 30px;
}
i {
margin-bottom: 30px;
color: white;
}
.icon-home {
margin-top: 30px;
}
.nav.show {
display: block;
animation: fadeInLeft .5s linear;
width: 15vw;
}
.nav.hide {
display: block;
opacity: 0;
animation: fadeOutLeft .5s linear;
width: 15vw;
}
#keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-15vw);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
<nav class="nav">
<ul>
<li><i class='icon-home'></i></li>
<li><i class='icon-user'></i></li>
<li><i class='icon-facebook'></i></li>
<li><i class='icon-twitter'></i></li>
<li><i class='icon-linkedin'></i></li>
</ul>
</nav>

The button to hide the block - cards does not work JS

There are cards, when you click on the checkmark, the card flies sideways, when you click on the cross, the card turns over to the correct answer. On this side there is a button, when you click on which the card flies to the side, as well as when you click on the checkmark. I have a problem with the last point. How to make it so that when you click on the button with the class next on the back of the card, the active card flies sideways? https://jsfiddle.net/kyen9gsw/
'use strict';
var quizcardContainer = document.querySelector('.quizcard');
var allCards = document.querySelectorAll('.flip-card');
var nope = document.getElementById('nope');
var love = document.getElementById('love');
var next = document.getElementById('next');
function initCards(card, index) {
var newCards = document.querySelectorAll('.flip-card:not(.removed)');
newCards.forEach(function (card, index) {
card.style.zIndex = allCards.length - index;
card.style.opacity = (10 - index) / 10;
});
quizcardContainer.classList.add('loaded');
}
initCards();
function createButtonListener(love) {
return function (event) {
var cards = document.querySelectorAll('.flip-card:not(.removed)');
var moveOutWidth = document.body.clientWidth * 0.3;
if (!cards.length) return false;
var card = cards[0];
card.classList.add('removed');
if (love) {
card.style.transform = 'translate(' + moveOutWidth + 'px, -900px) rotate(0deg)';
} else if (nope){
card.classList.toggle('do-flip');
document.querySelectorAll('next').onclick = function() {
card.style.transform = 'translate(' + moveOutWidth + 'px, 900px)';
};
}
initCards();
event.preventDefault();
};
}
var nopeListener = createButtonListener(false);
var loveListener = createButtonListener(true);
nope.addEventListener('click', nopeListener);
love.addEventListener('click', loveListener);
.quizcard {
width: 100vw;
height: 100vh;
overflow: hidden;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
position: relative;
opacity: 0;
-webkit-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out;
}
.loaded.quizcard {
opacity: 1;
}
.quizcard--status {
position: absolute;
top: 50%;
margin-top: -30px;
z-index: 2;
width: 100%;
text-align: center;
pointer-events: none;
}
.quizcard--status i {
font-size: 100px;
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position: absolute;
width: 100px;
margin-left: -50px;
}
.quizcard_love .fa-check {
opacity: 0.7;
-webkit-transform: scale(1);
transform: scale(1);
}
.quizcard_nope .fa-remove {
opacity: 0.7;
-webkit-transform: scale(1);
transform: scale(1);
}
.quizcard--cards {
-webkit-box-flex: 1;
flex-grow: 1;
padding-top: 40px;
text-align: center;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: end;
align-items: flex-end;
z-index: 1;
}
.quizcard--buttons {
-webkit-box-flex: 0;
flex: 0 0 100px;
text-align: center;
padding-top: 20px;
}
.quizcard--buttons button {
border-radius: 50%;
line-height: 60px;
width: 60px;
border: 0;
background: #FFFFFF;
display: inline-block;
margin: 0 8px;
background: #000;
}
.quizcard--buttons button:focus {
outline: 0;
}
.quizcard--buttons i {
font-size: 32px;
vertical-align: middle;
}
.fa-check {
color: #089404;
}
.fa-remove {
color: red;
}
.flip-card {
display: inline-block;
width: 90vw;
max-width: 400px;
height: 70vh;
text-align: center;
margin: 50px auto;
position: absolute;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.do-flip {
-o-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.flip-card .flip-card-front, .flip-card-back{
width: 100%;
height: 100%;
position: absolute;
-o-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
-webkit-box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
-moz-box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
}
.flip-card .flip-card-front {
background: lightgreen;
border:1px solid grey;
}
.flip-card .flip-card-back {
background: lightblue;
border: 1px solid grey;
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
height: 100%;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<div class="quizcard">
<div class="quizcard--cards">
<div class="flip-card">
<div class="flip-card-front"><p>Front1</p></div>
<div class="flip-card-back"><p>Back1</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
<div class="flip-card-front"><p>Front2</p></div>
<div class="flip-card-back"><p>Back2</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
<div class="flip-card-front"><p>Front3</p></div>
<div class="flip-card-back"><p>Back3</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
<div class="flip-card-front"><p>Front4</p></div>
<div class="flip-card-back"><p>Back4</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
<div class="flip-card-front"><p>Front5</p></div>
<div class="flip-card-back"><p>Back5</p><button class="next">flip</button></div>
</div>
</div>
<div class="quizcard--buttons">
<button id="nope"><i class="fa fa-remove"></i></button>
<button id="love"><i class="fa fa-check"></i></button>
</div>
</div>

While adding Events to a class in JS you should use getElementsByClassName instead of getElementById .
Try this code
document.getElementsByClassName('next').onclick = function() { document.getElementById('flip-card').classList.toggle('do-flip'); };

Full screen menu working just on first slide of slider not on the rest - CSS, HTML

I am using swiper slider for my website and I encountered an issue with adding full-screen menu on each slide.
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
/* Swiper */
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
/* Menu */
.container.menu a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.container.menu a:hover:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #FF5252;
border: none;
height: 3px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
visibility: hidden;
transition: opacity .35s, visibility .35s, width .35s;
z-index: 50;
}
.overlay:before {
content: '';
background: #FF5252;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left .35s ease;
}
.overlay:after {
content: '';
background: #FF5252;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all .35s ease;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open:before {
left: 0;
}
.overlay.open:after {
right: 0;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .55s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .65s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
.navbar-brand {
color: white;
font-size: 1.75rem !important;
}
nav li {
padding: 10px;
font-weight: 400;
font-size: 1rem;
}
nav li a:hover {
color: black;
}
nav .nav-link {
color: white;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Slide 1
</div>
<div class="swiper-slide">
Slide 2
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
</div>
</div>
<div class="swiper-slide">
Slide 3
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
A hamburger menu button is displayed only on the first slide even though is added on all of them.
When I click on it it won't open. When I use this menu outside of slide it works just fine.
Not sure what am I missing any tip appreciated!

You have to write overlay <div>s outside the swiper with different ids each.
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay0">
<nav class="overlay-menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
</div>
<div class="overlay" id="overlay1">
<nav class="overlay-menu">
<ul>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
</ul>
</nav>
</div>
<div class="overlay" id="overlay2">
<nav class="overlay-menu">
<ul>
<li>Nine</li>
<li>Ten</li>
<li>Eleven </li>
<li>Twelve</li>
</ul>
</nav>
</div>
so, swiper-container div remains like this
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Slide 1
</div>
<div class="swiper-slide">
Slide 2
</div>
<div class="swiper-slide">
Slide 3
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
then, change the #toggle click function as follow
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay' + swiper.activeIndex).toggleClass('open');
});
Answer for the comment "Have just one more question if I don't want to display button just on first slide what should I do?"
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//////////// added
on: {
slideChange: function(){
if(this.activeIndex == 0) $("#toggle").hide();
else $("#toggle").show();
}
} //////////// added
});
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay'+swiper.activeIndex).toggleClass('open');
});
$("#toggle").hide(); //////////// added
</script>

Your menus have position:fixed, which positions them relative to their closest viewport. Normally, that's the <body>, but there are CSS properties which can cause an element to act as viewport for its children.
One such property is transform with any 3d transformation effect. Which is what's applied to your slider container. In this case, the slider container acts as a viewport to the menus, which all overlap.
A bad fix would be to apply a 3d inert transformation to each slide: transform: rotatez(0). Example:
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
/* Swiper */
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
/* Menu */
.container.menu a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.container.menu a:hover:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #FF5252;
border: none;
height: 3px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
visibility: hidden;
transition: opacity .35s, visibility .35s, width .35s;
z-index: 50;
}
.overlay:before {
content: '';
background: #FF5252;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left .35s ease;
}
.overlay:after {
content: '';
background: #FF5252;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all .35s ease;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open:before {
left: 0;
}
.overlay.open:after {
right: 0;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .55s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .65s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.swiper-slide {transform: rotatez(0)}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Slide 1
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
</div>
</div>
<div class="swiper-slide">
Slide 2
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
</div>
</div>
<div class="swiper-slide">
Slide 3
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
Note you currently have duplicate ids which will make your jQuery behave unexpectedly, but that's a different issue, outside of the scope of this question. If you need help with that problem, post a different question about it.
The proper solution is to have one single menu placed outside of the slider. It will be displayed over your slider, hence over each slide. Unless your menus are different and specific to each particular slide, appending the site menu to each slide is something you want to avoid.
Good fix example:
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
$('.toggle').click(function() {
$('.toggle').removeClass('active');
if (!$(this).closest('.overlay').is('div')) {
$('.toggle', $('#overlay')).addClass('active');
}
$('#overlay').toggleClass('open');
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
/* Swiper */
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
/* Menu */
.container.menu a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.container.menu a:hover:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active {
z-index: 1;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #FF5252;
border: none;
height: 3px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
visibility: hidden;
transition: opacity .35s, visibility .35s, width .35s;
z-index: 50;
}
.overlay:before {
content: '';
background: #FF5252;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left .35s ease;
}
.overlay:after {
content: '';
background: #FF5252;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all .35s ease;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open:before {
left: 0;
}
.overlay.open:after {
right: 0;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .55s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .65s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.swiper-slide {
transform: rotatez(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="overlay" id="overlay">
<div class="button_container toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<nav class="overlay-menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Slide 1
</div>
<div class="swiper-slide">
Slide 2
<div class="button_container toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</div>
<div class="swiper-slide">
Slide 3
<div class="button_container toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
If you have specific menus for each slide, go with the "bad" fix, but make sure you fix your ids and jQuery to account for each button opening its respective menu.

You can try this code here
I am changing little code the hamburger button id to class because of the swiper slider regenerate your HTML on his won formate, so I changed the code document click.
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
$(document).on('click','.toggle',function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
/* Swiper */
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
/* Menu */
.container.menu a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.container.menu a:hover:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #FF5252;
border: none;
height: 3px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
visibility: hidden;
transition: opacity .35s, visibility .35s, width .35s;
z-index: 50;
}
.overlay:before {
content: '';
background: #FF5252;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left .35s ease;
}
.overlay:after {
content: '';
background: #FF5252;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all .35s ease;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open:before {
left: 0;
}
.overlay.open:after {
right: 0;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .55s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .65s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Slide 1
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
</div>
</div>
<div class="swiper-slide">
Slide 2
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
</div>
</div>
<div class="swiper-slide">
Slide 3
<div class="button_container toggle" onClick="getMe">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
=== Thank you ===

Overlay nav doesn't cover all elements on the page

I'm having a bit of trouble getting the overlay nav to cover all the elements within the page. When I create a container or row for an individual section within the page the overlay seems to not overlay.
Here's the code and a link to codepen http://codepen.io/anon/pen/aOGYdy
HTML
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav id="topNav" class="overlay-menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section id="home">
<div class="container content-section">
<div class="col-md-12 intro-text no-padding">
<div class="col-md-5 intro-heading">Hello, I'm <div class="intro-heading blue">Tom<font color="#333">.</font>
</div>
<div ng-app="typeApp">
<section ng-controller="typeController" class="content">
<h2 ng-class="{typing: isTyping}">I'm {{ something }}<span class="cursor"> </span></h2>
</section>
</div>
</div>
<div class="col-md-7">
<img src="http://i.imgur.com/GRLosqO.png" class="img-responsive align="right" " alt="">
</div>
</div>
</div>
</section>
</section>
<section id="about">
<h1>About</h1>
</section>
<section id="contact">
<p>Contact</p>
</section>
CSS
html, body {
height: 100%;
margin: 0;
font-size: 21px;
}
/* TYPE */
h1 {
font-size: 2.7em;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -2px;
color: #222;
margin-bottom: .3em;
}
h2 {
font-weight: 200;
-webkit-text-stroke: 1px rgba(0,0,0,0.1);
}
h2 span.cursor {
display: inline-block;
background: #333;
margin-left: 1px;
width: .05em;
animation: blink 2s linear 0s infinite;
}
h2.typing span.cursor {
animation: none;
}
#keyframes blink {
0% { background: #FFF }
47% { background: #FFF }
50% { background: #333 }
97% { background: #333 }
100% { background: #FFF }
}
/* SECTIONS */
html, body {
height: 100%;
margin: 0;
padding: 0;
margin:0;
}
section {
height: 100%;
width: 100%;
display: table;
}
#home {
background-color: #ffffff;
}
#portfolio {
background-color: #1abc9c;
}
#about {
background-color: #e67e22;
}
#contact {
background-color: #22a7f0;
}
p {
display: table-cell;
text-align: center;
vertical-align: middle;
font: 700 3em/1 'Open Sans', sans-serif;
text-shadow: 0.1em 0.1em rgba(0, 0, 0, 0.2);
color: #fff;
}
.container {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 40%;
left: 0;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #35B0FC;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 0;
-webkit-transition: .35s ease;
transition: .35s ease;
}
.container a:hover:after, .container a:focus:after, .container a:active:after {
width: 100%;
}
.button_container {
position: fixed;
top: 3%;
right: 3%;
height: 25px;
width: 35px;
cursor: pointer;
z-index: 100;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
-webkit-transform: translateY(11px) translateX(0) rotate(45deg);
-ms-transform: translateY(11px) translateX(0) rotate(45deg);
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
-ms-transform: translateY(-11px) translateX(0) rotate(-45deg);
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: black;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all .35s ease;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
.overlay {
position: fixed !important;
background: #22a7f0;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: .50s;
animation-delay: .50s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
/*
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: relative;
}
*/
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
height: 3px;
background: #FFF;
-webkit-transition: .35s;
transition: .35s;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
JavaScript
//nav toggle
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$("nav li").click(function() {
$('#overlay').toggleClass('open');
$('#toggle').toggleClass('active');
});
//pages size
(function () {
var px, sections, speed, wait;
sections = document.getElementsByTagName('section');
px = 100;
speed = 0.5;
wait = 2000;
$(window).on('scroll', function () {
clearTimeout($.data(this, 'timer'));
return $.data(this, 'timer', setTimeout(function () {
var i, results, sectionY, time, windowY;
windowY = $(window).scrollTop();
i = sections.length - 1;
results = [];
while (i >= 0) {
if (sectionY - px < windowY && windowY < sectionY + px) {
time = Math.abs(windowY - sectionY) / speed;
$(document.body).animate({ scrollTop: sectionY }, time, 'swing');
}
results.push(i--);
}
}, wait));
});
}.call(this));
//slide
// Cache selectors
var lastId,
topMenu = $("#topNav"),
topMenuHeight = topMenu.outerHeight(),
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
o = href === "#" ? 0 : $(href).offset().top-topMenuHeight+15;
$('html, body').stop().animate({
scrollTop: o
}, 800);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});

Just add a z-index to .overlay
http://codepen.io/anon/pen/oXdqYy
.overlay {
position: fixed !important;
background: #22a7f0;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
z-index: 99;
}