Вы можете найти ссылку на мой сайт здесь: http://pensacola.co.uk/
На настольном устройстве, когда вы нажимаете на меню гамбургера, панель навигации переходит справа -ручная сторона страницы. Эта функция работает нормально, однако на мобильном устройстве, когда страница загружается, она включает элементы навигации с правой стороны и поэтому не работает должным образом. Есть ли способ исправить это так, чтобы до тех пор, пока вы не нажали на меню бургеров, отображалось только содержимое моей страницы?
HTML
CSS
/* Navigtaion - Responsive Format */
@media screen and (max-width:2000px) {
body {
overflow-x: hidden;
}
.nav-links {
background-color: #F4F4F4;
position: absolute;
height: 100%;
width: 100%;
right: 0px;
top: 50px;
display: flex;
flex-direction: column;
align-items: left;
transform: translateX(100%);
transition: transform 0.5s ease-in;
padding-top: 50px;
}
nav {
background-color: #F4F4F4;
}
.burger {
display: block;
cursor: pointer;
}
}
@media screen and (max-width: 900px) {
.nav-links li {
font-size: 20pt;
}
.nav-links li p {
width: 90%;
}
}
.nav-active {
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,5px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-5px);
}
JS
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click',()=> {
// Toggle nav
nav.classList.toggle('nav-active');
// Animate links
navLinks.forEach((link, index) => {
if(link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5 ease forwards ${index / 7 + 3}s`;
}
});
//Burger animation
burger.classList.toggle('toggle');
});
}