Search the Community
Showing results for tags 'мобильноеменю'.
Found 1 result
-
Здравствуйте! Помогите, пожалуйста, разобраться. Я только начинаю свой путь в разработке, так вот проблема в следующем: не открывается мобильное меню на нескольких новых страницах сайта, которые я должна сверстать, то есть изначально была одна страница (прикрепленный файл product-cherry.html), созданная другим программистом. На новой странице (прикрепленный файл index.html) header остается тем же, за исключением 3-го пункта меню (но я не меняла класс для него). Буду очень благодарна за помощь! TypeError: Cannot read property 'addEventListener' of null Разметка header на первоначальной странице (где все работает) !DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Джем</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon"> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> </head> <body> <div class="main_wrap"> <header class="header"> <nav class="header__menu"> <li class="header__menu-djem header__menu-djem__cherry" data-link="djem"> <a href="index.html#jam-id">Джем</a> </li> <li class="header__menu-sets header__menu-sets__cherry" data-link="set"> <a href="index.html#sets-id">Наборы</a> </li> <li class="header__menu-coop header__menu-coop__cherry"> <a href="cooperation.html">Сотрудничество</a> </li> </nav> <div class="header__logo"></div> <button class="header__btn-call header__btn-call__cherry" type="button" name="button" data-for-modal="send-modal"> Позвоните мне </button> <button class="header__btn-opt header__btn-opt__cherry" type="button" name="button"> <a href="cooperation.html">Опт</a> </button> <button class="header__btn-basket"></button> <div class="header__soc"> <a target="_blank" href="https://www.instagram.com/cookerybox/"></a> <a target="_blank" href="https://vk.com/cookerybox"></a> </div> <div class="header__menu_mob" data-link="mobile"> <span></span> <span></span> <span></span> </div> <ul class="header__mobile-menu header__mobile-menu__cherry mobile-hide" data-menu="mobile"> <a class="header__mobile-menu__djem" data-link="mobile-2" href="index.html#jam-id"> Джемы </a> <a class="header__mobile-menu__djem" data-link="mobile-3" href="index.html#sets-id"> Наборы </a> <a href="cooperation.html"> Сотрудничество </a> </ul> </header> Скрипт menu.js class Menu { constructor(link, menu) { this.link = document.querySelector(`[data-link=${link}]`) this.menu = document.querySelector(`[data-menu=${menu}]`) this.link.addEventListener('click', this.showMenu.bind(this)) this.show = `${menu}-show` this.hide = `${menu}-hide` this.active = `${link}-active` this.notActive = `${link}-not-active` this._show = false } showMenu() { if(!this._show) { this.menu.classList.remove(this.hide) this.menu.classList.add(this.show) this.link.classList.add(this.active) this.link.classList.remove(this.notActive) this._show = true } else { this.menu.classList.remove(this.show) this.menu.classList.add(this.hide) this.link.classList.remove(this.active) this.link.classList.add(this.notActive) this._show = false } } } // desktop menu const menu1 = new Menu('djem', 'djem') const menu4 = new Menu('set', 'set') // mobile menu level 1 const menu2 = new Menu('mobile', 'mobile') //mobile menu level 2 const menu3 = new Menu('mobile-2', 'mobile-2') const menu5 = new Menu('mobile-3', 'mobile-3') Разметка header на новой странице <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Главная "Cookery box"</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon"> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> </head> <body> <div class="main_wrap main_index"> <header class="header"> <nav class="header__menu"> <li class="header__menu-djem" data-link="djem"> <a href="#jam-id">Джем</a> </li> <li class="header__menu-sets" data-link="set"> <a href="#sets-id">Наборы</a> </li> <li class="header__menu-coop"> <a href="#forkitchen-id">Для кухни</a> </li> </nav> <div class="header__logo"></div> <button class="header__btn-call" type="button" name="button" data-for-modal="send-modal"> Позвоните мне </button> <button class="header__btn-opt" type="button" name="button"> <a href="cooperation.html">Опт</a> </button> <button class="header__btn-basket"></button> <div class="header__soc"> <a target="_blank" href="https://www.instagram.com/cookerybox/"></a> <a target="_blank" href="https://vk.com/cookerybox"></a> </div> <div class="header__menu_mob" data-link="mobile"> <span></span> <span></span> <span></span> </div> <ul class="header__mobile-menu mobile-hide" data-menu="mobile"> <a class="header__mobile-menu__djem" data-link="mobile-2" href="#jam-id"> Джемы </a> <a class="header__mobile-menu__djem" data-link="mobile-3" href="#sets--id"> Наборы </a> <a href="#forkitchen-id"> Для кухни </a> </ul> </header>