При открытии сайта на мобильном устройстве автоматически срабатывает бургер-меню
Здравствутйте, такая проблема учусь верстать сайты и в связи с войной мой курс у меня забрали обучения, но остался чуть материал и вот я сделал свой сайт под мобильное устройство, открываю, а у меня сразу срабатывает бургер меню и приходится его закрывать, что бы получить доступ к контенту) Подскажите, как убрать автоматическое срабатывания бургера ?
<button class="open-burger-btn" type="button" data-menu-open>
<svg class="open-burger-btn__burger-icon" width="40" height="40">
<use href="./images/symbol-defs.svg#icon-burger-menu"></use>
</svg>
<div class="burger-menu is-open" data-menu>
<div class="container mobile-menu__container">
<button class="burger-menu__close_btn" data-menu-close>
<svg class="burger-menu__svg" width="40" height="40">
<use href="./images/symbol-defs.svg#close-icon"></use>
</svg>
</button>
<nav class="nav-burger-menu">
<ul class="burger-nav-list">
<li class="burger-nav-list__marker-list">
<a class="burger-nav-list__link current " href="">Студия</a>
</li>
<li class="burger-nav-list__marker-list">
<a class="burger-nav-list__link" href="./porfolio.html">Портфолио</a>
</li>
<li class="burger-nav-list__marker-list">
<a class="burger-nav-list__link" href="">Контакты</a>
</li>
</ul>
</nav>
<address>
<ul class="burger-adress-list">
<li class="burger-adress-list__item">
<a class="burger-adress-list__adress-link" href="tel:+380961111111"
>+38 096 111 11 11</a
>
</li>
<li class="burger-adress-list__item">
<a class="burger-adress-list__mail-link" href="mailto:[email protected]"
>[email protected]</a
>
</li>
</ul>
</address>
<ul class="burger-social-link-list">
<li class="burger-social-link-list__item">
<a class="burger-social-link-list_link" href="">Instagram</a>
</li>
<li class="burger-social-link-list__item">
<a class="burger-social-link-list_link" href="">Twitter</a>
</li>
<li class="burger-social-link-list__item">
<a class="burger-social-link-list_link" href="">Facebook</a>
</li>
<li class="burger-social-link-list__item">
<a class="burger-social-link-list_link" href="">LinkedIn</a>
</li>
</ul>
</div>
</div>
Так же js, честно скажу js еще не изучал, это был код предоставлен нашим ментором
(() => {
const refs = {
openMenuBtn: document.querySelector('[data-menu-open]'),
closeMenuBtn: document.querySelector('[data-menu-close]'),
menu: document.querySelector('[data-menu]'),
};
refs.openMenuBtn.addEventListener('click', toggleModal);
refs.closeMenuBtn.addEventListener('click', toggleModal);
function toggleModal() {
refs.menu.classList.toggle('is-open');
}
})();
Ответы (1 шт):
Автор решения: Neverm1ndo
→ Ссылка
Для того, чтобы меню не появлялось, вам нужно убрать класс is-open из элемента с дата-атрибутом data-menu.
<div class="burger-menu" data-menu>
В вашем случае именно этот класс определяет, будет ли отображено меню.