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

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

Browse Source
fitness
Kirill Pet 8 months ago
parent a68e12af2f
commit 5b0a62233e
3 changed files with 173 additions and 159 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 23
      assets/css/gp-style-tablet.css
  2. 135
      assets/js/main.js
  3. 174
      index.html

23
assets/css/gp-style-tablet.css
Unescape 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,22 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 100%; left: 100%;
width: 100%; width: 100%;
transition: all .3s; height: 100%;
height: 100vh; padding: 104px 16px 40px 16px;
background-color: var(--background-main); background-color: var(--background-main);
transition: all .5s;
} }
.phone-menu__sub.active{ .phone-menu__sub.open{
left: 0; left: 0;
overflow-y: auto;
} }
.phone-menu__sub .title-1{ .phone-menu__sub li:nth-child(2) a{
margin-bottom: 32px; font-weight: 700;
font-size: 32px;
} }
.phone-menu-content__close{ .phone-menu-content__close{
position: absolute; position: absolute;
@ -213,9 +215,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;

135
assets/js/main.js
Unescape View File

@ -163,31 +163,77 @@ function howPhone() {
// how end // how end
// phone menu // 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 => { block.style.height = contentHeight;
if (li.querySelector('.header-menu-list__next')) { }
let nextButton = li.querySelector('.header-menu-list__next'),
sub = li.querySelector('.header-menu-list__sub');
nextButton.addEventListener('mouseover', function (event) { let closeMenu = document.querySelector('.phone-menu-content__close');
let openSubMenu = document.querySelector('.header-menu-list__sub.open'); closeMenu.onclick = function () {
let block = document.querySelector('.phone-menu');
if (openSubMenu) { block.style.height = '0px';
openSubMenu.classList.remove('open'); }
}
sub.classList.add('open'); let phoneList = document.querySelectorAll('.phone-menu__list');
}) phoneList.forEach(list => {
let elementList = list.querySelectorAll('li');
sub.addEventListener('mouseout', function (event) { elementList.forEach(element => {
if (event.relatedTarget.offsetParent.tagName != 'UL') { let nextList = element.querySelector('.phone-menu__sub');
sub.classList.remove('open');
if (nextList) {
let button = element.querySelector('a');
button.onclick = function () {
nextList.classList.add('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 // phone menu end
// search // search
@ -297,52 +343,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 => { sub.classList.add('open');
let className = button.dataset.menu; })
if (typeof className == 'undefined') return;
button.addEventListener('mouseover', function (event) { sub.addEventListener('mouseout', function (event) {
if (block.querySelector('.header-menu-list-next-content__item.active')) { if (event.relatedTarget.offsetParent.tagName != 'UL') {
block.querySelector('.header-menu-list-next-content__item.active').classList.toggle('active'); sub.classList.remove('open');
block.querySelector('.header-menu-list-next__content-next.active').classList.toggle('active');
} }
button.classList.toggle('active');
document.querySelector(`.header-menu-list-next__content-next.${className}`).classList.toggle('active');
}) })
}) };
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);
}
})
}) })
// pc menu end // pc menu end

174
index.html
Unescape View File

@ -257,107 +257,99 @@
</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"> <button class="phone-menu-content__close"></button>
<button class="phone-menu-content__close main"></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>
<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="tel:+74957988081">+7 (495) 798-80-81</a> <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>
<a class="phone-menu__text phone-menu__text--no-line" href="mailto:sales@bestinfitness.ru">sales@bestinfitness.ru</a> <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>
<div class="phone-social"> <div class="phone-menu__block">
<a href="#" class="btn-social"> <p class="phone-menu__text">
<img src="assets/img/social/telegram.svg" alt=""> Работаем с гос.заказчиками по<br>
</a> <a href="">44-ФЗ/223-ФЗ</a>
</p>
<a href="#" class="btn-social">
<img src="assets/img/social/whatsapp.svg" alt="">
</a>
</div>
</div>
<div class="phone-menu__block"> <a class="phone-menu__text phone-menu__text--no-line" href="tel:+74957988081">+7 (495) 798-80-81</a>
<a href="#" class="btn-big btn-big--border btn-big--border--blood">
Заказать звонок
</a>
</div>
</div>
</div>
<div class="phone-menu__sub catalog"> <a class="phone-menu__text phone-menu__text--no-line" href="mailto:sales@bestinfitness.ru">sales@bestinfitness.ru</a>
<div class="phone-menu__content">
<button class="phone-menu-content__close"></button>
<p class="title-1">
Каталог
</p>
<ul class="phone-menu__list"> <div class="phone-social">
<li> <a href="#" class="btn-social">
<a href="#" class="phone-menu--next" data-menu="cardio">Кардио</a> <img src="assets/img/social/telegram.svg" alt="">
</li> </a>
<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 class="phone-menu__sub cardio"> <a href="#" class="btn-social">
<div class="phone-menu__content"> <img src="assets/img/social/whatsapp.svg" alt="">
<button class="phone-menu-content__close"></button> </a>
</div>
<p class="title-1"> </div>
Кардио
</p>
<ul class="phone-menu__list"> <div class="phone-menu__block">
<li>Беговые дорожки</li> <a href="#" class="btn-big btn-big--border btn-big--border--blood">
<li>Беговые дорожки</li> Заказать звонок
<li>Беговые дорожки</li> </a>
<li>Беговые дорожки</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
<div class="phone-search"> <div class="phone-search">

Write Preview
Loading…
Cancel
Save