Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

переделал меню phone на ul

Browse Source
This commit is contained in:
Kirill Pet
2024-12-23 17:31:11 +03:00
parent a68e12af2f
commit 5b0a62233e
3 changed files with 175 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
assets/js/main.js
View File

@@ -163,31 +163,77 @@ function howPhone() {
// how end
// phone menu
let listMenu = document.querySelectorAll('.header-menu__list > li');
let btnOpenMenu = document.querySelector('.button-menu__open');
btnOpenMenu.onclick = function () {
let block = document.querySelector('.phone-menu'),
content = document.querySelector('.phone-menu__content'),
contentHeight = content.offsetHeight + 'px';
listMenu.forEach(li => {
if (li.querySelector('.header-menu-list__next')) {
let nextButton = li.querySelector('.header-menu-list__next'),
sub = li.querySelector('.header-menu-list__sub');
block.style.height = contentHeight;
}
nextButton.addEventListener('mouseover', function (event) {
let openSubMenu = document.querySelector('.header-menu-list__sub.open');
let closeMenu = document.querySelector('.phone-menu-content__close');
closeMenu.onclick = function () {
let block = document.querySelector('.phone-menu');
if (openSubMenu) {
openSubMenu.classList.remove('open');
block.style.height = '0px';
}
let phoneList = document.querySelectorAll('.phone-menu__list');
phoneList.forEach(list => {
let elementList = list.querySelectorAll('li');
elementList.forEach(element => {
let nextList = element.querySelector('.phone-menu__sub');
if (nextList) {
let button = element.querySelector('a');
button.onclick = function () {
nextList.classList.add('open')
}
sub.classList.add('open');
})
sub.addEventListener('mouseout', function (event) {
if (event.relatedTarget.offsetParent.tagName != 'UL') {
sub.classList.remove('open');
nextList.querySelector('.phone-menu-content__close').onclick = function () {
nextList.classList.remove('open')
}
})
};
}
})
})
// let closeMainMenu = document.querySelector('.phone-menu-content__close.main');
// closeMainMenu.onclick = function () {
// let phoneMenu = document.querySelector('.phone-menu'),
// block = document.querySelector('.phone-menu__block-content.main'),
// content = document.querySelector('.phone-menu__content.main');
// phoneMenu.classList.remove('active');
// block.style.height = 0;
// }
// let nextPhoneMenu = document.querySelectorAll('.phone-menu--next');
// nextPhoneMenu.forEach(next => {
// next.onclick = function () {
// let subName = next.dataset.menu,
// blockSub = document.querySelector(`.phone-menu__sub.${subName}`);
// blockSub.classList.add('active');
// }
// })
// let subPhone = document.querySelectorAll('.phone-menu__sub');
// subPhone.forEach(menu => {
// let close = menu.querySelector('.phone-menu-content__close');
// close.onclick = function () {
// menu.classList.remove('active');
// }
// })
// phone menu end
// search
@@ -297,52 +343,29 @@ phoneInputs.forEach(phoneInput => {
// pc menu
let blocksMenu = document.querySelectorAll('.header-menu-list-next__block');
let listMenu = document.querySelectorAll('.header-menu__list > li');
blocksMenu.forEach(block =>{
let button = block.querySelector('.header-menu-list__next'),
content = block.querySelector('.header-menu-list-next__content');
listMenu.forEach(li => {
if (li.querySelector('.header-menu-list__next')) {
let nextButton = li.querySelector('.header-menu-list__next'),
sub = li.querySelector('.header-menu-list__sub');
button.addEventListener('mouseover', function (event) {
if (document.querySelector('.header-menu-list-next__content.active')) {
document.querySelector('.header-menu-list-next__content.active').classList.remove('active');
}
content.classList.add('active');
})
nextButton.addEventListener('mouseover', function (event) {
let openSubMenu = document.querySelector('.header-menu-list__sub.open');
let nextButtons = block.querySelectorAll('.header-menu-list-next-content__item');
nextButtons.forEach(button => {
let className = button.dataset.menu;
if (typeof className == 'undefined') return;
button.addEventListener('mouseover', function (event) {
if (block.querySelector('.header-menu-list-next-content__item.active')) {
block.querySelector('.header-menu-list-next-content__item.active').classList.toggle('active');
block.querySelector('.header-menu-list-next__content-next.active').classList.toggle('active');
if (openSubMenu) {
openSubMenu.classList.remove('open');
}
button.classList.toggle('active');
document.querySelector(`.header-menu-list-next__content-next.${className}`).classList.toggle('active');
sub.classList.add('open');
})
})
content.addEventListener('mouseout', function (event) {
if (event.relatedTarget.offsetParent.classList.contains('header-menu-list-next__content-next')) return;
if (event.relatedTarget.offsetParent != content) {
content.classList.remove('active');
content.querySelectorAll('.header-menu-list-next__content-next.active').forEach(next => {
next.classList.remove('active');
})
block.querySelector('.header-menu-list-next-content__item.active').classList.remove('active');
content.removeEventListener("mouseout", handleMouseDown, false);
}
})
sub.addEventListener('mouseout', function (event) {
if (event.relatedTarget.offsetParent.tagName != 'UL') {
sub.classList.remove('open');
}
})
};
})
// pc menu end