@il14
Верстальщик,который хочет всё и сразу (самоирония)

Как убрать меню бургер при нажатии на контент сайта?

Здравствуйте. Я верстаю один сайт. Изучаю JavaScript. С JQuery пока дружу не особо. Хотел сделать меню-бургер для мобильных устройств (это ведь так называется?). Суть проблемы была сделать так, чтобы при первом клике на главный пункт, выходило меню с остальными, а при повторном клике остальные пункты скрывались. Сделал блок в HTML:
<div class = "phone_navigation">
    <div class = "main_href" id="something">
        <p class = "hrefs">Товары</p>
    </div>
    <div class = "etc_hrefs">
        <p class = "hrefs">Главная</p>
        <p class = "hrefs">Услуги</p>
        <p class = "hrefs">Задать вопрос</p>
        <p class = "hrefs">Наш офис</p>
    </div>
</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita amet vero, sapiente maiores quas 
    ullam quae. Aperiam repellat sunt accusantium, debitis, ullam quia reprehenderit distinctio corrupti 
    tenetur non tempora blanditiis?</p>

Задал значения в CSS:
div.phone_navigation{
    display: block;
}
div.etc_hrefs{
    display: block;
    position: absolute;
    background: white;
    z-index: 50;
    width: 100%;
    left: -100%;
    transition-property: left;
    transition-duration: 0.8s;
    transition-timing-function: ease;
}
p.hrefs{
margin-left: 2%;
}

Откопал вот такой код с Оверфлов и немного подогнал под свои нужды:
$('#something').on('click', function() {
    if (!$(this).hasClass('clicked')) { // если класса нет
      $(this).addClass('clicked'); // добавляем класс
      document.getElementsByClassName('etc_hrefs')[0].style.left = '0'; // код для первого клика
    } else { // если есть
      $(this).removeClass('clicked'); // убираем класс
      document.getElementsByClassName('etc_hrefs')[0].style.left = '-100%'; // код для второго клика
    }
  });

Все работает, но хотелось бы чтобы меню скрывалось при нажатии на контент сайта. То есть я нажал на главный пункт - содержимое появилось, захотел скрыть - нажал на любой элемент на сайте. Буду благодарен за любую подсказку!
  • Вопрос задан
  • 137 просмотров
Решения вопроса 2
FinGanapre
@FinGanapre
Создайте за меню прозрачный div на весь экран и обработайте на нём клик. При желании, можно задавать ему какой-либо цвет если потребуется в дальнейшем затемнять всё, кроме меню, когда оно открыто.
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
https://learn.javascript.ru/event-bubbling

Всплытие и перехват → event.target != elem → менять состояние.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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