diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index 5e24ffd..523e4bb 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -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: 100%; - height: 100vh; + padding: 104px 16px 40px 16px; background-color: var(--background-main); + + transition: all .5s; } -.phone-menu__sub.active{ +.phone-menu__sub.open{ left: 0; - - overflow-y: auto; } -.phone-menu__sub .title-1{ - margin-bottom: 32px; +.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; diff --git a/assets/js/main.js b/assets/js/main.js index f549512..c3d090a 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -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'; +} - sub.classList.add('open'); - }) +let phoneList = document.querySelectorAll('.phone-menu__list'); +phoneList.forEach(list => { + let elementList = list.querySelectorAll('li'); - sub.addEventListener('mouseout', function (event) { - if (event.relatedTarget.offsetParent.tagName != 'UL') { - sub.classList.remove('open'); + elementList.forEach(element => { + let nextList = element.querySelector('.phone-menu__sub'); + + 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 // 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'); + if (openSubMenu) { + openSubMenu.classList.remove('open'); + } - nextButtons.forEach(button => { - let className = button.dataset.menu; - - if (typeof className == 'undefined') return; + sub.classList.add('open'); + }) - 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.addEventListener('mouseout', function (event) { + if (event.relatedTarget.offsetParent.tagName != 'UL') { + sub.classList.remove('open'); } - - - 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 diff --git a/index.html b/index.html index 6167460..15bf8b5 100644 --- a/index.html +++ b/index.html @@ -257,107 +257,99 @@
-
-
- - - - -
-

- Работаем с гос.заказчиками по
- 44-ФЗ/223-ФЗ -

+
+ - +7 (495) 798-80-81 + -
- - - - - - - -
-
+
+

+ Работаем с гос.заказчиками по
+ 44-ФЗ/223-ФЗ +

-
- - Заказать звонок - -
-
-
+ +7 (495) 798-80-81 -
-
- - -

- Каталог -

+ sales@bestinfitness.ru - -
-
+
+ + + -
-
- - -

- Кардио -

+ + + +
+
-
    -
  • Беговые дорожки
    • -
  • Беговые дорожки
    • -
  • Беговые дорожки
    • -
  • Беговые дорожки
    • -
+
+ + Заказать звонок +
-