Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.07.2018, 10:04
Новичок на форуме
Отправить личное сообщение для tbny1 Посмотреть профиль Найти все сообщения от tbny1
 
Регистрация: 05.07.2018
Сообщений: 3

автоматическое сворачивание меню при нажатии ссылки
Здравствуйте. Нужна помощь доработать скрипт.
Требуется автоматическое сворачивание меню при нажатии ссылки.
(function(){
  'use strict';

  class Menu {
    constructor(settings) {
      this.nodeMenu = settings.nodeMenu;
      settings.nodeMenuButton.addEventListener('click', this.toggle.bind(this));
    }

    toggle() {
      return this.nodeMenu.classList.toggle('js-menu_activated');
    }
  }

  let nodeMenu = document.querySelector('body');
  
  new Menu({
    nodeMenu: nodeMenu,
    nodeMenuButton: nodeMenu.querySelector('.js-menu__toggle')
  });
})();

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="page">
		<div class="page__demo">
			<div class="page__container">
				<span class="page__name">Mobile Menu Animation</span>
				<span class="page__hint">Works better on mobile <a name="top">devices</a>. The hamburger button is <a name="pop">comfortably</a> available for a lefty and righty.</span>
      <a href="https://www.youtube.com/watch?v=org6Tmfp3PQ" rel="noopener noreferrer" target="_blank">YouTube video with the coding practice</a>
    </div>
  </div>
</div>
<header class="header">
  <div class="hamburger">
    <button class="button hamburger__button js-menu__toggle">
      <span class="hamburger__label">Open menu</span>
    </button>
  </div>
  <nav class="menu">
    <ul class="list menu__list">
      <li class="menu__group">
        <a href="#top" class="link menu__link">Home</a>
      </li>
      <li class="menu__group">
        <a href="#pop" class="link menu__link">About me</a>
      </li>
      </ul>
  </nav>
</header>
<script  src="js/index.js"></script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 05.07.2018, 10:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Сообщение от tbny1
Требуется автоматическое сворачивание меню при нажатии ссылки.
какой ссылки?
Ответить с цитированием
  #3 (permalink)  
Старый 05.07.2018, 10:21
Новичок на форуме
Отправить личное сообщение для tbny1 Посмотреть профиль Найти все сообщения от tbny1
 
Регистрация: 05.07.2018
Сообщений: 3

В меню (якорь)
<li class="menu__group">
 <a href="#pop" class="link menu__link">About me</a>
</li>
Ответить с цитированием
  #4 (permalink)  
Старый 05.07.2018, 10:26
Новичок на форуме
Отправить личное сообщение для tbny1 Посмотреть профиль Найти все сообщения от tbny1
 
Регистрация: 05.07.2018
Сообщений: 3

Файлы
Вложения:
Тип файла: zip 3.zip (3.1 Кб, 0 просмотров)
Ответить с цитированием
  #5 (permalink)  
Старый 05.07.2018, 10:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

tbny1,
вариант ...
(function(){
    'use strict';

    class Menu {
        constructor(settings) {
            this.clsMenuButton = settings.clsMenuButton;
            this.nodeMenu = settings.nodeMenu
            this.nodeMenu.addEventListener('click', this.toggle.bind(this));
        }

        toggle(event) {
            if(event.target.closest(this.clsMenuButton)){
            event.preventDefault();
            this.nodeMenu.classList.toggle('js-menu_activated');
            }
            else this.nodeMenu.classList.remove('js-menu_activated');
        }
    }

    let nodeMenu = document.querySelector('body');

    new Menu({
        nodeMenu: nodeMenu,
        clsMenuButton: '.js-menu__toggle'
    });
})();
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинки кнопки при нажатии и обратно при повторном нажатии mff Общие вопросы Javascript 15 03.05.2018 14:12
Меню при нажатии(добавление класса. kostia170985 Общие вопросы Javascript 5 12.07.2017 15:07
Несколько пунктов меню, отображение содержимого при клике chelfenix jQuery 3 10.04.2015 16:52
js для плавного увеличения пункта меню при наведении Серега187 Элементы интерфейса 2 19.10.2013 11:33
Размещение формы при нажатии ссылки bav4ik jQuery 1 05.05.2011 11:10