Javascript-форум (https://javascript.ru/forum/)
-   Мобильный JavaScript (https://javascript.ru/forum/mobile/)
-   -   автоматическое сворачивание меню при нажатии ссылки (https://javascript.ru/forum/mobile/74376-avtomaticheskoe-svorachivanie-menyu-pri-nazhatii-ssylki.html)

tbny1 05.07.2018 10:04

автоматическое сворачивание меню при нажатии ссылки
 
Здравствуйте. Нужна помощь доработать скрипт.
Требуется автоматическое сворачивание меню при нажатии ссылки.
(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>

рони 05.07.2018 10:13

Цитата:

Сообщение от tbny1
Требуется автоматическое сворачивание меню при нажатии ссылки.

какой ссылки?

tbny1 05.07.2018 10:21

В меню (якорь)
<li class="menu__group">
 <a href="#pop" class="link menu__link">About me</a>
</li>

tbny1 05.07.2018 10:26

Вложений: 1
Файлы

рони 05.07.2018 10:27

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'
    });
})();


Часовой пояс GMT +3, время: 19:35.