diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 4ade042..54eaf3c 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -114,6 +114,7 @@ .header-menu__list li:first-child{ margin-left: 0; } + .header-menu__list a{ color: var(--text-white); text-decoration: none; @@ -127,18 +128,16 @@ display: block; } -.header-menu-list-next__block{ - position: relative; -} -.header-menu-list-next__content{ +.header-menu-list__sub{ + margin-top: 30px; + position: absolute; - top: 50px; - left: 0; width: 300px; padding: 14px 0; + list-style-type: none; background-color: var(--background-grey); opacity: 0; @@ -146,66 +145,53 @@ transition: all .3s; } -.header-menu-list-next__content.active{ +.header-menu-list__sub.open{ opacity: 1; pointer-events: auto; } -.header-menu-list-next-content__item{ - display: block; - +.header-menu-list__sub li{ + margin-left: 0; +} +.header-menu-list__sub li > a{ padding: 14px 24px; - font-weight: 400; - font-size: 16px; - text-transform: uppercase; - color: var(--text-white); - transition: all .3s; -} -.header-menu-list-next-content__item:hover{ - padding-right: 23px; - border-right: 1px solid var(--text-white); - background-color: var(--background-grey-hover); + display: block; } -.header-menu-list-next-content__item.active{ +.header-menu-list__sub > li:hover{ padding-right: 23px; - border-right: 1px solid var(--text-white); background-color: var(--background-grey-hover); + border-right: 1px solid var(--text-white); +} +.header-menu-list__sub > li > ul{ + transition: all .3s; +} +.header-menu-list__sub > li:hover > ul{ + opacity: 1; + pointer-events: auto; } -.header-menu-list-next__content-next{ +.header-menu-list__sub ul{ position: absolute; top: 0; - left: 300px; + left: 100%; - display: block; + width: 100%; + height: 100%; - min-height: 100%; - width: 300px; + display: block; - padding: 12px; background-color: var(--background-grey-hover); - - display: flex; - flex-direction: column; + list-style-type: none; opacity: 0; pointer-events: none; - transition: all .6s; } -.header-menu-list-next__content-next.active{ +.header-menu-list__sub ul.open{ opacity: 1; 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{ display: flex; align-items: center; diff --git a/assets/js/main.js b/assets/js/main.js index 66308b9..f549512 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -163,51 +163,31 @@ function howPhone() { // how end // phone menu -let btnOpenMenu = document.querySelector('.button-menu__open'); +let listMenu = document.querySelectorAll('.header-menu__list > li'); -btnOpenMenu.onclick = function () { - let phoneMenu = document.querySelector('.phone-menu'), - block = document.querySelector('.phone-menu__block-content.main'), - content = document.querySelector('.phone-menu__content.main'), - newHeigh = 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'); - phoneMenu.classList.add('active'); - // block.classList.add('active'); - block.style.height = newHeigh; -} - -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; -} + nextButton.addEventListener('mouseover', function (event) { + let openSubMenu = document.querySelector('.header-menu-list__sub.open'); + if (openSubMenu) { + openSubMenu.classList.remove('open'); + } -let nextPhoneMenu = document.querySelectorAll('.phone-menu--next'); + sub.classList.add('open'); + }) -nextPhoneMenu.forEach(next => { - next.onclick = function () { - let subName = next.dataset.menu, - blockSub = document.querySelector(`.phone-menu__sub.${subName}`); - - blockSub.classList.add('active'); - } + sub.addEventListener('mouseout', function (event) { + if (event.relatedTarget.offsetParent.tagName != 'UL') { + sub.classList.remove('open'); + } + }) + }; }) -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 diff --git a/index.html b/index.html index a12d9a3..6167460 100644 --- a/index.html +++ b/index.html @@ -111,47 +111,97 @@
  • О компании
  • -
  • -
    - каталог - - -
    +
  • + каталог + +
  • -
    - бренды -
    + бренды + +
  • зонирование