Как при нажатии на кнопку открыть и закрыть меню
При нажатии на кнопку — появляется меню, при последующем нажатии — закрывается. Для этой задачи будет использовать jQuery.
Создадим структуру кнопки, по нажатию на которую будет открываться меню и само меню, которое изначально будет скрыто.
<nav class="wrap-myMenu">
<button class="main-myButton">☰</button>
<ul class="content">
<li><a href="#link97">Главная</a></li>
<li><a href="#link98">Обо мне</a></li>
<li><a href="#link99">Портфолио</a></li>
</ul>
</nav>
Стили по ситуации. Единственное что нужно, это скрыть меню .content.
.content {
display: none;
}
А уже в JavaScript сделаем чтобы при нажатии на кнопку меню открывалось / закрывалось.
$(() => {
$(".main-myButton").click(() => {
$(".content").slideToggle();
});
});
Должен быть подключен обязательно jQuery.
Затемнение заднего фона при открытом меню
При открытии меню будем затемнять задний фон, а при закрытии возвращать в первоначальное положение.
Изменим JavaScript код. При клике на кнопку будем добавлять класс overlay для body.
$(() => {
$(".main-myButton").click(() => {
$(".content").slideToggle();
$("body").toggleClass("overlay");
});
});
Добавим стилей для затемнения.
body.overlay::before {
content: "";
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
position: absolute;
z-index: -1;
}
Возможно придётся немного поиграться с z-index.
Закрытие меню при клике вне его
Давайте, рассмотрим ситуацию когда необходимо закрывать меню при клике вне его (за пределами меню).
jQuery(($) => {
// menu
const menu = $(".content");
const menuBtn = $(".main-myButton");
$(document).mouseup(function (e) {
console.log(e.target)
if (e.target.className === "main-myButton") {
menuBtn.addClass("is-active");
menu.stop().slideDown();
} else if (e.target.className === "main-myButton is-active") {
menuBtn.removeClass("is-active");
menu.stop().slideUp();
} else if ((menu.has(e.target).length === 0) && (menuBtn.has(e.target).length === 0)) {
// if ($(window).width() < 768) {
menuBtn.removeClass("is-active");
menu.stop().slideUp();
// }
}
});
});
Мы написали три условия:
- Если меню закрыто — открыть его и добавить класс кнопке is-active.
- Если меню открыто — закрыть его и удалить класс с кнопки is-active.
- Если клик вне меню и кнопки открытия/закрытия меню — закрыть меню и удалить класс is-active.
Таким образом, мы можем закрывать меню при клике на кнопку и при клике вне области меню.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии (5)
- Андрей
- Only to top
- Андрей
- Талгат
- Only to top