7 Commits

Author SHA1 Message Date
Kirill Pet
078f77b44b fix log 2024-12-24 12:36:33 +03:00
Kirill Pet
5bb2a18ae3 создал addClosePhoneMenu для создания кнопки в меню для телефона 2024-12-24 12:35:52 +03:00
Kirill Pet
9ec0db852e fix 2024-12-23 20:29:53 +03:00
Kirill Pet
86eb54bb5c написал fetch для search 2024-12-23 19:39:10 +03:00
Kirill Pet
5b0a62233e переделал меню phone на ul 2024-12-23 17:31:11 +03:00
Kirill Pet
a68e12af2f переделал меню pc на ul 2024-12-23 16:12:24 +03:00
Kirill Pet
d272e126ad fix allowTouchMove 2024-12-22 13:02:50 +03:00
4 changed files with 361 additions and 261 deletions

View File

@@ -114,6 +114,7 @@
.header-menu__list li:first-child{ .header-menu__list li:first-child{
margin-left: 0; margin-left: 0;
} }
.header-menu__list a{ .header-menu__list a{
color: var(--text-white); color: var(--text-white);
text-decoration: none; text-decoration: none;
@@ -127,18 +128,16 @@
display: block; display: block;
} }
.header-menu-list-next__block{ .header-menu-list__sub{
position: relative; margin-top: 30px;
}
.header-menu-list-next__content{
position: absolute; position: absolute;
top: 50px;
left: 0;
width: 300px; width: 300px;
padding: 14px 0; padding: 14px 0;
list-style-type: none;
background-color: var(--background-grey); background-color: var(--background-grey);
opacity: 0; opacity: 0;
@@ -146,66 +145,53 @@
transition: all .3s; transition: all .3s;
} }
.header-menu-list-next__content.active{ .header-menu-list__sub.open{
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }
.header-menu-list-next-content__item{ .header-menu-list__sub li{
display: block; margin-left: 0;
}
.header-menu-list__sub li > a{
padding: 14px 24px; padding: 14px 24px;
font-weight: 400; transition: all .3s;
font-size: 16px;
text-transform: uppercase;
color: var(--text-white);
display: block;
}
.header-menu-list__sub > li:hover{
padding-right: 23px;
background-color: var(--background-grey-hover);
border-right: 1px solid var(--text-white);
}
.header-menu-list__sub > li > ul{
transition: all .3s; transition: all .3s;
} }
.header-menu-list-next-content__item:hover{ .header-menu-list__sub > li:hover > ul{
padding-right: 23px; opacity: 1;
pointer-events: auto;
border-right: 1px solid var(--text-white);
background-color: var(--background-grey-hover);
} }
.header-menu-list-next-content__item.active{ .header-menu-list__sub ul{
padding-right: 23px;
border-right: 1px solid var(--text-white);
background-color: var(--background-grey-hover);
}
.header-menu-list-next__content-next{
position: absolute; position: absolute;
top: 0; top: 0;
left: 300px; left: 100%;
width: 100%;
height: 100%;
display: block; display: block;
min-height: 100%;
width: 300px;
padding: 12px;
background-color: var(--background-grey-hover); background-color: var(--background-grey-hover);
list-style-type: none;
display: flex;
flex-direction: column;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: all .6s;
} }
.header-menu-list-next__content-next.active{ .header-menu-list__sub ul.open{
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }
.header-menu-list-next-content-next__item{
padding: 12px;
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
color: var(--text-white);
}
.header-menu__search{ .header-menu__search{
display: flex; display: flex;
align-items: center; align-items: center;
@@ -283,6 +269,11 @@
background-color: var(--background-grey-hover); background-color: var(--background-grey-hover);
border-radius: 4px; border-radius: 4px;
display: none;
}
.header-menu-search__found.active{
display: block;
} }
.header-menu-search__error{} .header-menu-search__error{}
.header-menu-search__item{ .header-menu-search__item{

View File

@@ -110,14 +110,14 @@
height: 100vh; height: 100vh;
overflow-y: auto; overflow-y: auto;
} }
.phone-menu__block-content{ /* .phone-menu__block-content{
height: 0; height: 0;
overflow: hidden; overflow: hidden;
z-index: 10; z-index: 10;
transition: all .5s; transition: all .5s;
} } */
.phone-menu__content{ .phone-menu__content{
padding: 104px 16px 40px 16px; padding: 104px 16px 40px 16px;
@@ -127,20 +127,24 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 100%; left: 100%;
width: 100%;
transition: all .3s;
height: 100vh; width: 100%;
height: 100%;
padding: 104px 16px 40px 16px;
background-color: var(--background-main); background-color: var(--background-main);
}
.phone-menu__sub.active{ transition: all .5s;
left: 0;
overflow-y: auto; overflow-y: auto;
} }
.phone-menu__sub .title-1{ .phone-menu__sub.open{
margin-bottom: 32px; left: 0;
}
.phone-menu__sub > li:nth-child(2) a{
font-weight: 700;
font-size: 32px;
} }
.phone-menu-content__close{ .phone-menu-content__close{
position: absolute; position: absolute;
@@ -213,9 +217,6 @@
.phone-menu__text--no-line{ .phone-menu__text--no-line{
text-decoration: none; text-decoration: none;
} }
.phone-menu__sub .title-1{
text-transform: capitalize;
}
.phone-social{ .phone-social{
margin-top: 24px; margin-top: 24px;

View File

@@ -15,6 +15,7 @@ const gymSwiper = new Swiper('.gym-swiper', {
const reviewsSwiper = new Swiper('.reviews-swiper', { const reviewsSwiper = new Swiper('.reviews-swiper', {
spaceBetween: 24, spaceBetween: 24,
allowTouchMove: false,
// If we need pagination // If we need pagination
pagination: { pagination: {
el: '.swiper-pagination', el: '.swiper-pagination',
@@ -162,51 +163,58 @@ function howPhone() {
// how end // how end
// phone menu // phone menu
addClosePhoneMenu('.phone-menu__content');
addClosePhoneMenu('.phone-menu__sub');
let btnOpenMenu = document.querySelector('.button-menu__open'); let btnOpenMenu = document.querySelector('.button-menu__open');
btnOpenMenu.onclick = function () { btnOpenMenu.onclick = function () {
let phoneMenu = document.querySelector('.phone-menu'), let block = document.querySelector('.phone-menu'),
block = document.querySelector('.phone-menu__block-content.main'), content = document.querySelector('.phone-menu__content'),
content = document.querySelector('.phone-menu__content.main'), contentHeight = content.offsetHeight + 'px';
newHeigh = content.offsetHeight + 'px';
phoneMenu.classList.add('active'); block.style.height = contentHeight;
// block.classList.add('active');
block.style.height = newHeigh;
} }
let closeMainMenu = document.querySelector('.phone-menu-content__close.main'); let closeMenu = document.querySelector('.phone-menu-content__close');
closeMenu.onclick = function () {
let block = document.querySelector('.phone-menu');
closeMainMenu.onclick = function () { block.style.height = '0px';
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 phoneList = document.querySelectorAll('.phone-menu__list');
phoneList.forEach(list => {
let elementList = list.querySelectorAll('li');
let nextPhoneMenu = document.querySelectorAll('.phone-menu--next'); elementList.forEach(element => {
let nextList = element.querySelector('.phone-menu__sub');
nextPhoneMenu.forEach(next => { if (nextList) {
next.onclick = function () { let button = element.querySelector('a');
let subName = next.dataset.menu,
blockSub = document.querySelector(`.phone-menu__sub.${subName}`); button.onclick = function () {
nextList.classList.add('open')
blockSub.classList.add('active'); }
}
nextList.querySelector('.phone-menu-content__close').onclick = function () {
nextList.classList.remove('open')
}
}
})
}) })
let subPhone = document.querySelectorAll('.phone-menu__sub'); function addClosePhoneMenu(classAdd) {
document.querySelectorAll(classAdd).forEach(element => {
let button = document.createElement('button');
button.className = "phone-menu-content__close";
subPhone.forEach(menu => { let referenceElement = element.firstElementChild;
let close = menu.querySelector('.phone-menu-content__close');
close.onclick = function () { element.insertBefore(button, referenceElement);
menu.classList.remove('active'); })
}
}) }
// phone menu end // phone menu end
// search // search
@@ -233,6 +241,92 @@ btnOpenSearchPhone.onclick = function () {
searchPhone.classList.toggle('active'); searchPhone.classList.toggle('active');
} }
// pc
let inputSearchPc = document.querySelector('.header-menu-search__input'),
btnSearchPc = document.querySelector('.header-menu-search__btn');
btnSearchPc.onclick = function () {
let value = inputSearchPc.value,
newPost = {
value: value,
};
postSearch(newPost, 'pc');
}
// phone
let inputSearchPhone = document.querySelector('.phone-search__input');
inputSearchPhone.addEventListener('input', function(event) {
let value = event.target.value,
newPost = {
value: value,
};
postSearch(newPost, 'phone');
});
function postSearch(newPost, device) {
let contentPc = document.querySelector('.header-menu-search__found'),
contentPhone = document.querySelector('.phone-search__found');
fetch('http://jsonplaceholder.typicode.com/posts', {
method: 'POST',
// body: JSON.stringify(newPost),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then((data) => {
if (device == 'pc') {
contentPc.innerHTML = '';
contentPc.innerHTML = `<div class="header-menu-search__item">
<img src="assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img">
<div class="header-menu-search-item__content">
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
<p class="header-menu-search-item__art text-2">Артикул:&nbsp;STP1000C</p>
</div>
</div>`;
contentPc.classList.add('active');
}else{
contentPhone.innerHTML = '';
contentPhone.innerHTML = `<div class="phone-search__item">
<img src="assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img">
<div class="phone-search-item__content">
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
<p class="phone-search-item__art text-2">Артикул:&nbsp;STP1000C</p>
</div>
</div>`;
contentPhone.classList.add('active');
}
}).catch(
() => {
if (device == 'pc') {
postError(contentPc);
}else{
postError(contentPhone);
}
}
)
}
function postError(divContent) {
divContent.innerHTML = ''
let p = document.createElement("p");
p.textContent = "Произошла ошибка"
p.className = "header-menu-search__error text-2";
divContent.appendChild(p);
}
// search end // search end
// open-modal // open-modal
@@ -316,52 +410,29 @@ phoneInputs.forEach(phoneInput => {
// pc menu // pc menu
let blocksMenu = document.querySelectorAll('.header-menu-list-next__block'); let listMenu = document.querySelectorAll('.header-menu__list > li');
blocksMenu.forEach(block =>{ listMenu.forEach(li => {
let button = block.querySelector('.header-menu-list__next'), if (li.querySelector('.header-menu-list__next')) {
content = block.querySelector('.header-menu-list-next__content'); let nextButton = li.querySelector('.header-menu-list__next'),
sub = li.querySelector('.header-menu-list__sub');
button.addEventListener('mouseover', function (event) { nextButton.addEventListener('mouseover', function (event) {
if (document.querySelector('.header-menu-list-next__content.active')) { let openSubMenu = document.querySelector('.header-menu-list__sub.open');
document.querySelector('.header-menu-list-next__content.active').classList.remove('active');
}
content.classList.add('active');
})
let nextButtons = block.querySelectorAll('.header-menu-list-next-content__item'); if (openSubMenu) {
openSubMenu.classList.remove('open');
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');
} }
sub.classList.add('open');
button.classList.toggle('active');
document.querySelector(`.header-menu-list-next__content-next.${className}`).classList.toggle('active');
}) })
})
content.addEventListener('mouseout', function (event) { sub.addEventListener('mouseout', function (event) {
if (event.relatedTarget.offsetParent.classList.contains('header-menu-list-next__content-next')) return; if (event.relatedTarget.offsetParent.tagName != 'UL') {
sub.classList.remove('open');
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);
}
})
}) })
// pc menu end // pc menu end

View File

@@ -111,47 +111,97 @@
<li> <li>
<a href="#">О компании</a> <a href="#">О компании</a>
</li> </li>
<li > <li>
<div class="header-menu-list-next__block"> <a href="#" class="header-menu-list__next">каталог</a>
<a href="#" class="header-menu-list__next">каталог</a>
<div class="header-menu-list-next__content"> <ul class="header-menu-list__sub">
<a href="#" class="header-menu-list-next-content__item" data-menu="cardio"> <li>
Кардио <a href="#">Кардио</a>
</a> <ul>
<li>
<a href="#" class="header-menu-list-next-content__item" data-menu="cardio-1"> <a href="#">беговые дорожки</a>
механическое кардио </li>
</a> <li>
<a href="#">беговые дорожки</a>
<a href="#" class="header-menu-list-next-content__item"> </li>
силовые тренажеры <li>
</a> <a href="#">беговые дорожки</a>
</li>
<a href="#" class="header-menu-list-next-content__item"> <li>
скамьи <a href="#">беговые дорожки</a>
</a> </li>
</ul>
<div class="header-menu-list-next__content-next cardio"> </li>
<a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a> <li>
<a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a> <a href="#">механическое кардио</a>
<a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a> <ul>
<a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a> <li>
</div> <a href="#">беговые дорожки 2</a>
</li>
<div class="header-menu-list-next__content-next cardio-1"> <li>
<a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a> <a href="#">беговые дорожки 2</a>
<a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a> </li>
<a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a> <li>
<a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a> <a href="#">беговые дорожки 2</a>
</div> </li>
</div> <li>
</div> <a href="#">беговые дорожки 2</a>
</li>
</ul>
</li>
<li>
<a href="#">силовые тренажеры</a>
</li>
<li>
<a href="#">скамьи</a>
</li>
</ul>
</li> </li>
<li> <li>
<div class=""> <a href="#" class="header-menu-list__next">бренды</a>
<a href="#" class="header-menu-list__next">бренды</a>
</div> <ul class="header-menu-list__sub">
<li>
<a href="#">Кардио</a>
<ul>
<li>
<a href="#">беговые дорожки</a>
</li>
<li>
<a href="#">беговые дорожки</a>
</li>
<li>
<a href="#">беговые дорожки</a>
</li>
<li>
<a href="#">беговые дорожки</a>
</li>
</ul>
</li>
<li>
<a href="#">механическое кардио</a>
<ul>
<li>
<a href="#">беговые дорожки 2</a>
</li>
<li>
<a href="#">беговые дорожки 2</a>
</li>
<li>
<a href="#">беговые дорожки 2</a>
</li>
<li>
<a href="#">беговые дорожки 2</a>
</li>
</ul>
</li>
<li>
<a href="#">силовые тренажеры</a>
</li>
<li>
<a href="#">скамьи</a>
</li>
</ul>
</li> </li>
<li> <li>
<a href="#">зонирование</a> <a href="#">зонирование</a>
@@ -178,7 +228,7 @@
<input type="text" class="header-menu-search__input" placeholder="Поиск"> <input type="text" class="header-menu-search__input" placeholder="Поиск">
<div class="header-menu-search__found"> <div class="header-menu-search__found">
<div class="header-menu-search__item"> <!-- <div class="header-menu-search__item">
<img src="assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img"> <img src="assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img">
<div class="header-menu-search-item__content"> <div class="header-menu-search-item__content">
@@ -194,7 +244,7 @@
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p> <p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
<p class="header-menu-search-item__art text-2">Артикул: STP1000C</p> <p class="header-menu-search-item__art text-2">Артикул: STP1000C</p>
</div> </div>
</div> </div> -->
<!-- <p class="header-menu-search__error text-2"> <!-- <p class="header-menu-search__error text-2">
К сожалению, по вашему запросу ничего не найдено К сожалению, по вашему запросу ничего не найдено
@@ -207,126 +257,113 @@
</div> </div>
<div class="phone-menu"> <div class="phone-menu">
<div class="phone-menu__block-content main"> <div class="phone-menu__content">
<div class="phone-menu__content main"> <ul class="phone-menu__list">
<button class="phone-menu-content__close main"></button> <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">
<li>
<a href="#">Каталог</a>
</li>
<li>
<a href="#" class="phone-menu--next">Кардио</a>
<ul class="phone-menu__sub phone-menu__list">
<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>
<ul class="phone-menu__list"> <div class="phone-menu__block">
<li> <p class="phone-menu__text">
<a href="#">спецификация</a> Работаем с гос.заказчиками по<br>
</li> <a href="">44-ФЗ/223-ФЗ</a>
<li>О компании</li> </p>
<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>
<div class="phone-menu__block"> <a class="phone-menu__text phone-menu__text--no-line" href="tel:+74957988081">+7 (495) 798-80-81</a>
<p class="phone-menu__text">
Работаем с гос.заказчиками по<br>
<a href="">44-ФЗ/223-ФЗ</a>
</p>
<a class="phone-menu__text phone-menu__text--no-line" href="tel:+74957988081">+7 (495) 798-80-81</a> <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="mailto:sales@bestinfitness.ru">sales@bestinfitness.ru</a> <div class="phone-social">
<a href="#" class="btn-social">
<img src="assets/img/social/telegram.svg" alt="">
</a>
<div class="phone-social"> <a href="#" class="btn-social">
<a href="#" class="btn-social"> <img src="assets/img/social/whatsapp.svg" alt="">
<img src="assets/img/social/telegram.svg" alt="">
</a>
<a href="#" class="btn-social">
<img src="assets/img/social/whatsapp.svg" alt="">
</a>
</div>
</div>
<div class="phone-menu__block">
<a href="#" class="btn-big btn-big--border btn-big--border--blood">
Заказать звонок
</a> </a>
</div> </div>
</div> </div>
</div>
<div class="phone-menu__sub catalog"> <div class="phone-menu__block">
<div class="phone-menu__content"> <a href="#" class="btn-big btn-big--border btn-big--border--blood">
<button class="phone-menu-content__close"></button> Заказать звонок
</a>
<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> </div>
</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>
<div class="phone-search"> <div class="phone-search">
<div class="phone-search__content"> <div class="phone-search__content">
<input type="text" class="phone-search__input" placeholder="Поиск"> <input type="text" class="phone-search__input" placeholder="Поиск">
<div class="phone-search__found active"> <div class="phone-search__found">
<!-- <p class="text-1"> <!-- <p class="text-1">
К сожалению, по вашему запросу ничего не найдено К сожалению, по вашему запросу ничего не найдено
</p> --> </p> -->
<div class="phone-search__item"> <!-- <div class="phone-search__item">
<img src="assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img"> <img src="assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img">
<div class="phone-search-item__content"> <div class="phone-search-item__content">
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p> <p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
<p class="phone-search-item__art text-2">Артикул:&nbsp;STP1000C</p> <p class="phone-search-item__art text-2">Артикул:&nbsp;STP1000C</p>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>