Search the Community

Showing results for tags 'мобильноеменю'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML и CSS
    • Для начинающих
    • Препроцессоры, постпроцессоры и шаблонизаторы
    • Методологии
    • Фреймворки и библиотеки
  • JavaScript
    • Для начинающих
    • Фреймворки и библиотеки
    • Скрипты и плагины
  • Разработка сайтов
    • Для начинающих
    • Инструменты разработки, сборки и автоматизации
    • Аудит и анализ кода
    • Программное обеспечение разработчика
    • Веб-дизайн
    • Мобильные платформы
    • Open Source
  • Серверное программирование
    • Для начинающих
    • PHP
    • Платформы и языки программирования
    • Базы данных
    • Скрипты, готовые движки, CMS, конструкторы
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Сервер
    • Техническая поддержка
    • Веб-сервер
    • Базы данных
    • Хостинг
    • Домены
  • Интернет-маркетинг, SEO
    • Поисковая оптимизация
    • Поисковые системы
    • Продвижение и монетизация веб-сайта
    • Сервисы статистики и аналитики
    • Услуги и сервис
    • Покупка и продажа
  • Коммерческие услуги
    • Freelance
    • Работа
    • Услуги и сервис
  • Давайте поговорим о ...
    • Общий
    • Хобби, отдых и развлечение
    • Человек и общество
    • Флейм
  • Наш форум
    • Конкурсы
    • Работа форума

Calendars

  • События в Украине
  • События в России
  • События форума
  • События партнёров
  • Все события

Blogs

  • CMS (Content Management System)
  • Руководство верстальщика
  • Блог HTMLforum.io

Marker Groups

  • Members
  • Front-end
  • Back-end
  • Education
  • Looking for job
  • Offering job

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Web site


ICQ


Jabber


Skype


From


Interests

Found 1 result

  1. Здравствуйте! Помогите, пожалуйста, разобраться. Я только начинаю свой путь в разработке, так вот проблема в следующем: не открывается мобильное меню на нескольких новых страницах сайта, которые я должна сверстать, то есть изначально была одна страница (прикрепленный файл 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>