Я анимирую оверлей очень плохо, путём свистоплясок в JS. Мастера css, подскажите, как сделать нормально без js? ну или минимум js
const header__burger = document.querySelector('.header__burger');
const links = document.querySelector('.links');
header__burger.addEventListener('click', () => {
header__burger.classList.toggle('active');
if (header__burger.classList.contains('active')) {
document.body.style.overflowX = 'hidden';
links.style.visibility = 'visible';
} else {
links.addEventListener('transitionend', transEnd);
document.body.style.overflowX = 'auto';
}
function transEnd() {
links.style.visibility = 'hidden';
links.removeEventListener('transitionend', transEnd);
}
});
window.addEventListener('resize', () => {
const width = document.body.clientWidth;
if (width < 850) {
links.style.visibility = 'visible';
}
})
@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style-type: none;
}
body {
font-family: 'Work Sans', sans-serif;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 15px;
}
header {
padding: 20px 0;
background-color: black;
color: white;
text-transform: uppercase;
font-size: 20px;
position: fixed;
top: 0;
left: 0;
position: fixed;
width: 100%;
}
.menu__nav {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
}
.logo {
font-size: 24px;
white-space: nowrap;
}
.nav__link {
text-decoration: none;
text-transform: uppercase;
position: relative;
color: white;
}
.nav__link:not(:last-child) {
margin-right: 10px;
}
.nav__link::before,
.nav__link::after {
position: absolute;
display: block;
content: '';
width: 100%;
height: 2px;
background-color: orange;
top: 0;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
transform-origin: left;
}
.nav__link::after {
top: 100%;
transform-origin: right;
}
.nav__link:hover::before,
.nav__link:hover::after {
transform: scaleX(1);
}
.links {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.lines {
position: relative;
width: 25px;
padding: 10px 10px;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
margin-right: 15px;
z-index: 2;
}
.line__burger {
width: 100%;
height: 3px;
background-color: white;
position: absolute;
transition: transform 0.3s linear;
}
.line__burger:nth-child(1) {
transform: translateY(8px);
}
.line__burger:nth-child(3) {
transform: translateY(-8px);
}
.header__burger.active .line__burger:nth-child(1) {
transform: rotate(45deg);
}
.header__burger.active .line__burger:nth-child(2),
.header__burger.active .line__burger:nth-child(3) {
transform: rotate(-45deg);
}
@media (max-width: 850px) {
.lines {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
position: absolute;
right: 0;
}
.nav__link {
margin: 15px 0;
}
.links {
opacity: 0;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 20px;
overflow-y: auto;
transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
background-color: rgba(0, 0, 0, 0.0);
}
.header__burger.active .links {
opacity: 1;
background-color: rgba(0, 0, 0, 0.8);
}
}
<header>
<div class="container">
<div class="menu__nav">
<div class="logo">My company</div>
<div class="header__burger">
<div class="links">
<a href="#" class="nav__link">Home</a>
<a href="#" class="nav__link">About</a>
<a href="#" class="nav__link">Services</a>
<a href="#" class="nav__link">Portfolio</a>
<a href="#" class="nav__link">Testimonials</a>
<a href="#" class="nav__link">Contact</a>
</div>
<div class="lines">
<div class="line__burger"></div>
<div class="line__burger"></div>
<div class="line__burger"></div>
</div>
</div>
</div>
</div>
</header>