переделал меню phone на ul
This commit is contained in:
Kirill Pet
@@ -110,14 +110,14 @@
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.phone-menu__block-content{
|
||||
/* .phone-menu__block-content{
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
transition: all .5s;
|
||||
}
|
||||
} */
|
||||
.phone-menu__content{
|
||||
padding: 104px 16px 40px 16px;
|
||||
|
||||
@@ -127,20 +127,22 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
width: 100%;
|
||||
transition: all .3s;
|
||||
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
padding: 104px 16px 40px 16px;
|
||||
|
||||
background-color: var(--background-main);
|
||||
}
|
||||
.phone-menu__sub.active{
|
||||
left: 0;
|
||||
|
||||
overflow-y: auto;
|
||||
transition: all .5s;
|
||||
}
|
||||
.phone-menu__sub .title-1{
|
||||
margin-bottom: 32px;
|
||||
.phone-menu__sub.open{
|
||||
left: 0;
|
||||
}
|
||||
.phone-menu__sub li:nth-child(2) a{
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
}
|
||||
.phone-menu-content__close{
|
||||
position: absolute;
|
||||
@@ -213,9 +215,6 @@
|
||||
.phone-menu__text--no-line{
|
||||
text-decoration: none;
|
||||
}
|
||||
.phone-menu__sub .title-1{
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.phone-social{
|
||||
margin-top: 24px;
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
168
index.html
168
index.html
@@ -257,107 +257,99 @@
|
||||
</div>
|
||||
|
||||
<div class="phone-menu">
|
||||
<div class="phone-menu__block-content main">
|
||||
<div class="phone-menu__content main">
|
||||
<button class="phone-menu-content__close main"></button>
|
||||
<div class="phone-menu__content">
|
||||
<button class="phone-menu-content__close"></button>
|
||||
|
||||
<ul class="phone-menu__list">
|
||||
<li>
|
||||
<a href="#">спецификация</a>
|
||||
</li>
|
||||
<li>О компании</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next" data-menu="catalog">каталог</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next" data-menu="brand">бренды</a>
|
||||
</li>
|
||||
<li>зонирование</li>
|
||||
<li>проекты</li>
|
||||
<li>интересное</li>
|
||||
<li>контакты</li>
|
||||
</ul>
|
||||
<ul class="phone-menu__list">
|
||||
<li>
|
||||
<a href="#">спецификация</a>
|
||||
</li>
|
||||
<li>О компании</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next" data-menu="catalog">каталог</a>
|
||||
<ul class="phone-menu__sub phone-menu__list">
|
||||
<button class="phone-menu-content__close"></button>
|
||||
|
||||
<div class="phone-menu__block">
|
||||
<p class="phone-menu__text">
|
||||
Работаем с гос.заказчиками по<br>
|
||||
<a href="">44-ФЗ/223-ФЗ</a>
|
||||
</p>
|
||||
<li>
|
||||
<a href="#">Каталог</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">Кардио</a>
|
||||
<ul class="phone-menu__sub phone-menu__list">
|
||||
<button class="phone-menu-content__close"></button>
|
||||
<li>
|
||||
<a href="#">Кардио</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">Беговые дорожки</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">Беговые дорожки</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">Беговые дорожки</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">Беговые дорожки</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">механическое кардио</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">силовые тренажеры</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">скамьи</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">свободные веса</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">Функциональный тренинг</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Уникальные продукты</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next" data-menu="brand">бренды</a>
|
||||
</li>
|
||||
<li>зонирование</li>
|
||||
<li>проекты</li>
|
||||
<li>интересное</li>
|
||||
<li>контакты</li>
|
||||
</ul>
|
||||
|
||||
<a class="phone-menu__text phone-menu__text--no-line" href="tel:+74957988081">+7 (495) 798-80-81</a>
|
||||
<div class="phone-menu__block">
|
||||
<p class="phone-menu__text">
|
||||
Работаем с гос.заказчиками по<br>
|
||||
<a href="">44-ФЗ/223-ФЗ</a>
|
||||
</p>
|
||||
|
||||
<a class="phone-menu__text phone-menu__text--no-line" href="mailto:sales@bestinfitness.ru">sales@bestinfitness.ru</a>
|
||||
<a class="phone-menu__text phone-menu__text--no-line" href="tel:+74957988081">+7 (495) 798-80-81</a>
|
||||
|
||||
<div class="phone-social">
|
||||
<a href="#" class="btn-social">
|
||||
<img src="assets/img/social/telegram.svg" alt="">
|
||||
</a>
|
||||
<a class="phone-menu__text phone-menu__text--no-line" href="mailto:sales@bestinfitness.ru">sales@bestinfitness.ru</a>
|
||||
|
||||
<a href="#" class="btn-social">
|
||||
<img src="assets/img/social/whatsapp.svg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="phone-social">
|
||||
<a href="#" class="btn-social">
|
||||
<img src="assets/img/social/telegram.svg" alt="">
|
||||
</a>
|
||||
|
||||
<div class="phone-menu__block">
|
||||
<a href="#" class="btn-big btn-big--border btn-big--border--blood">
|
||||
Заказать звонок
|
||||
<a href="#" class="btn-social">
|
||||
<img src="assets/img/social/whatsapp.svg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phone-menu__sub catalog">
|
||||
<div class="phone-menu__content">
|
||||
<button class="phone-menu-content__close"></button>
|
||||
|
||||
<p class="title-1">
|
||||
Каталог
|
||||
</p>
|
||||
|
||||
<ul class="phone-menu__list">
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next" data-menu="cardio">Кардио</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">механическое кардио</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">силовые тренажеры</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">скамьи</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">свободные веса</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">Функциональный тренинг</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="phone-menu--next">Уникальные продукты</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="phone-menu__block">
|
||||
<a href="#" class="btn-big btn-big--border btn-big--border--blood">
|
||||
Заказать звонок
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phone-menu__sub cardio">
|
||||
<div class="phone-menu__content">
|
||||
<button class="phone-menu-content__close"></button>
|
||||
|
||||
<p class="title-1">
|
||||
Кардио
|
||||
</p>
|
||||
|
||||
<ul class="phone-menu__list">
|
||||
<li>Беговые дорожки</li>
|
||||
<li>Беговые дорожки</li>
|
||||
<li>Беговые дорожки</li>
|
||||
<li>Беговые дорожки</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="phone-search">
|
||||
|
||||
Reference in New Issue
Block a user