<nav>
<a href="tel:nnnnnnnnn">+n (nnn) nnn-nn-nn</a>
<a class="logo" href="#">Logo</a>
<button class="open"><i class="fa-solid fa-bars"></i></button>
<div class="navigation">
<a href="#About">О нас</a>
<a href="#Portfolio">Портфолио</a>
<a href="">Услуги</a>
<a href="">Почему Лого</a>
<a href="">FAQ</a>
<button class="close"><i class="fa-solid fa-xmark"></i></button>
</div>
</nav>
nav {
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
padding: 0 10px;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba($color: #fff, $alpha: 0.4);
backdrop-filter: blur(25px);
a {
position: relative;
color: $text;
text-decoration: none;
&::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
left: 0;
bottom: -3px;
background: #222;
border-radius: 5px;
transform: scaleX(0);
transition: 0.4s;
}
&:hover::before {
transform: scaleX(1);
}
}
.logo {
font-size: 1.5rem;
}
.open {
border: 0;
outline: none;
cursor: pointer;
background: transparent;
i::after {
width: 30px;
}
}
.navigation {
-webkit-box-shadow: 0px 8px 53px 8px rgba(34, 34, 34, 0.09);
-moz-box-shadow: 0px 8px 53px 8px rgba(34, 34, 34, 0.09);
box-shadow: 0px 8px 53px 8px rgba(34, 34, 34, 0.09);
z-index: 0;
position: fixed;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
background-color: rgba($color: #fff, $alpha: 0.4);
backdrop-filter: blur(25px);
padding: 5%;
left: 50%;
transform: translateX(-50%) scaleY(0);
top: -314px;
width: 50%;
height: 0;
height: 80vh;
visibility: hidden;
transition: 1s;
}
.navigation.active {
transform: translateX(-50%) scaleY(1);
left: 50%;
top: 70px;
visibility: visible;
}
}
let menu_btn = document.querySelector('.open')
let menu = document.querySelector('.navigation')
menu_btn.addEventListener('click', ()=>{
menu.classList.toggle('active')
document.querySelector('.fa-bars').classList.toggle('fa-xmark')
})
как-то не красиво она выезжает, хотелось бы, чтобы слова не искажались
и ещё у класса .navigation backdrop-filter не работает
