blackseabreathe
@blackseabreathe
brackets

Как закрыть меню при клике на его пункт?

Привет, друзья!

Можете мне помочь с закрытием контейнера меню при клике на его пункт? Есть вот такая магия на js.

var menuBtn = document.getElementById('menuBtn');
var menuContainer = document.getElementById('menuContainer');
var menuIconClosed = "menu-icon closed"; //class name for closed button
var menuIconOpened = "menu-icon opened"; //class name for opened button
var menuContClosed = "menu-container closed"; //class name for closed menu
var menuContOpened = "menu-container opened"; //class name for opened menu

menuBtn.onclick = function() {
if (menuBtn.className == menuIconClosed) {
menuBtn.className = menuIconOpened;
menuContainer.className = menuContOpened;
} else if (menuBtn.className == menuIconOpened) {
menuBtn.className = menuIconClosed;
menuContainer.className = menuContClosed;
}
}
HTML
<span class="menu-icon closed" id="menuBtn"></span>

<div class="showMenu">Меню</div>
<nav class="menu-container closed" id="menuContainer">
<ul>
<li><a href="#gototop">Главная</a></li>
<li><a href="#ourservices">Услуги агентства</a></li>
<li><a href="#aboutus">О нас</a></li>
<li class="liNoAfter"><a href="#callus">Контакты</a></li>
<div class="myCellMobile">
<div class="myCellMargin">
<i class="fa fa-map-marker myFa"></i>
<p><span>г. Усть-Лабинск, ул.Октябрьская, 78</span><br />г. Краснодар, ул. Ставропольская 312 офис 8</p>
</div></div>
<div class="myCellMobile">
<div class="myCellMarginPhone">
<i class="fa fa-phone"></i>
<p class="ios_reset"><span class="nonono">+7 (918) 344-10-05</span><br />info@ricit.ru</p>
</div></div>
<li class="forcall"><span class="modal_btn">Заказать звонок</span></li>
</ul>
</nav>

Взято было с интернета потому, что сам в JS ни капли не силен; есть те, кто напишет как это можно воссоздать?) Как я понимаю нужно чтобы при клике на li.menu-container.opened к классу .menu-container добавлялся класс .closed вместо .opened, но я могу быть не прав здесь.
  • Вопрос задан
  • 1083 просмотра
Решения вопроса 1
blackseabreathe
@blackseabreathe Автор вопроса
brackets
Ответили на stackoverflow и работает все отлично:

var menuBtn = document.getElementById('menuBtn');
//Находим наш блок с меню
var menu = document.getElementById('menu');
var menuContainer = document.getElementById('menuContainer');
var menuIconClosed = "menu-icon closed"; //class name for closed button
var menuIconOpened = "menu-icon opened"; //class name for opened button
var menuContClosed = "menu-container closed"; //class name for closed menu
var menuContOpened = "menu-container opened"; //class name for opened menu
//Вешает клики на документ
//Проверяемклики в обертке для меню
menu.onclick = function(e) {
    //Проверяем объект клика - если кнопка меню запускаем функцию
    if(e.target ==  menuBtn) closeOrOpenMenu();
    //Если клик был не на ссилке не делаем ничего
    if(e.target.tagName != 'A') return;
    else closeOrOpenMenu();//Иначе закрываем меню
    
    //Функция для удобства
    function closeOrOpenMenu(){
      if (menuBtn.className == menuIconClosed) {
          menuBtn.className = menuIconOpened;
          menuContainer.className = menuContOpened;
      } else if (menuBtn.className == menuIconOpened) {
          menuBtn.className = menuIconClosed;
          menuContainer.className = menuContClosed;
      }
     }
}


<!--Сделаем обертку для меню чтобы проверять клики только в ней-->
<div id="menu">
<span class="menu-icon closed" id="menuBtn"></span>

<div class="showMenu" id="menu"menu>Меню</div>
<nav class="menu-container closed" id="menuContainer">
<ul>
<li><a href="#gototop">Главная</a></li>
<li><a href="#ourservices">Услуги агентства</a></li>
<li><a href="#aboutus">О нас</a></li>
<li class="liNoAfter"><a href="#callus">Контакты</a></li>
<div class="myCellMobile">
<div class="myCellMargin">
<i class="fa fa-map-marker myFa"></i>
<p><span>г. Усть-Лабинск, ул.Октябрьская, 78</span><br />г. Краснодар, ул. Ставропольская 312 офис 8</p>
</div></div>
<div class="myCellMobile">
<div class="myCellMarginPhone">
<i class="fa fa-phone"></i>
<p class="ios_reset"><span class="nonono">+7 (918) 344-10-05</span><br />info@ricit.ru</p>
</div></div>
<li class="forcall"><span class="modal_btn">Заказать звонок</span></li>
</ul>
</nav>
</div>


Удачи всем!
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
1. Пример не самый лучший
2.
Взято было с интернета потому, что сам в JS ни капли не силен

Тогда надо почитать про js. Не только для этого примера. Без js или jquery сегодня никак.
3.
как это можно воссоздать

Что значит "воссоздать"? ctrl+c и ctrl+v
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы