fix log

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;
 
+    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;
 }
-.header-menu-list-next-content__item:hover{
-    padding-right: 23px;
-
-    border-right: 1px solid var(--text-white);
-    background-color: var(--background-grey-hover);
+.header-menu-list__sub > li:hover > ul{
+    opacity: 1;
+    pointer-events: auto;
 }
-.header-menu-list-next-content__item.active{
-    padding-right: 23px;
-
-    border-right: 1px solid var(--text-white);
-    background-color: var(--background-grey-hover);
-}
-.header-menu-list-next__content-next{
+.header-menu-list__sub ul{
     position: absolute;
     top: 0;
-    left: 300px;
+    left: 100%;
+
+    width: 100%;
+    height: 100%;
 
     display: block;
 
-    min-height: 100%;
-    width: 300px;
-
-    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;
@@ -283,6 +269,11 @@
 
     background-color: var(--background-grey-hover);
     border-radius: 4px;
+
+    display: none;
+}
+.header-menu-search__found.active{
+    display: block;
 }
 .header-menu-search__error{}
 .header-menu-search__item{

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,24 @@
     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;
+
+    transition: all .5s;
 
     overflow-y: auto;
 }
-.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 +217,6 @@
 .phone-menu__text--no-line{
     text-decoration: none;
 }
-.phone-menu__sub .title-1{
-    text-transform: capitalize;
-}
 .phone-social{
     margin-top: 24px;
 

assets/js/main.js

@@ -15,6 +15,7 @@ const gymSwiper = new Swiper('.gym-swiper', {
 
 const reviewsSwiper = new Swiper('.reviews-swiper', {
     spaceBetween: 24,
+    allowTouchMove: false,
     // If we need pagination
     pagination: {
         el: '.swiper-pagination',
@@ -162,51 +163,58 @@ function howPhone() {
 // how end
 
 // phone menu
+addClosePhoneMenu('.phone-menu__content');
+addClosePhoneMenu('.phone-menu__sub');
+
 let btnOpenMenu = document.querySelector('.button-menu__open');
-
 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';
+    let block = document.querySelector('.phone-menu'),
+        content = document.querySelector('.phone-menu__content'),
+        contentHeight = content.offsetHeight + 'px';
 
-    phoneMenu.classList.add('active');
-    // block.classList.add('active');
-    block.style.height = newHeigh;
+    block.style.height = contentHeight;
 }
 
-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 () {
-    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;
+    block.style.height = '0px';
 }
 
+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 => {
-    next.onclick = function () {
-        let subName = next.dataset.menu,
-            blockSub = document.querySelector(`.phone-menu__sub.${subName}`);
+        if (nextList) {
+            let button = element.querySelector('a');
 
-        blockSub.classList.add('active');
+            button.onclick = function () {
+                nextList.classList.add('open')           
             }
+            
+            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 close = menu.querySelector('.phone-menu-content__close');
+        let referenceElement = element.firstElementChild;
 
-    close.onclick = function () {
-        menu.classList.remove('active');
-    }
-})
+        element.insertBefore(button, referenceElement);
+    })
+    
+}
 // phone menu end
 
 // search
@@ -233,6 +241,92 @@ btnOpenSearchPhone.onclick = function () {
     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
 
 // open-modal
@@ -316,52 +410,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

index.html

@@ -111,47 +111,97 @@
                         <li>
                             <a href="#">О компании</a>
                         </li>
-                        <li >
-                            <div class="header-menu-list-next__block">
+                        <li>
                             <a href="#" class="header-menu-list__next">каталог</a>
 
-                                <div class="header-menu-list-next__content">
-                                    <a href="#" class="header-menu-list-next-content__item" data-menu="cardio">
-                                        Кардио
-                                    </a>
-
-                                    <a href="#" class="header-menu-list-next-content__item"  data-menu="cardio-1">
-                                        механическое кардио
-                                    </a>
-
-                                    <a href="#" class="header-menu-list-next-content__item">
-                                        силовые тренажеры
-                                    </a>
-                                    
-                                    <a href="#" class="header-menu-list-next-content__item">
-                                        скамьи
-                                    </a>
-
-                                    <div class="header-menu-list-next__content-next cardio">
-                                        <a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a>
-                                        <a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a>
-                                        <a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a>
-                                        <a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a>
-                                    </div>
-
-                                    <div class="header-menu-list-next__content-next cardio-1">
-                                        <a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a>
-                                        <a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a>
-                                        <a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a>
-                                        <a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a>
-                                    </div>
-                                </div>
-                            </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>
-                            <div class="">
                             <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>
                             <a href="#">зонирование</a>
@@ -178,7 +228,7 @@
                             <input type="text" class="header-menu-search__input" placeholder="Поиск">
 
                             <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">
 
                                     <div class="header-menu-search-item__content">
@@ -194,7 +244,7 @@
                                         <p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
                                         <p class="header-menu-search-item__art text-2">Артикул: STP1000C</p>
                                     </div>
-                                </div>
+                                </div> -->
 
                                 <!-- <p class="header-menu-search__error text-2">
                                     К сожалению, по вашему запросу ничего не найдено
@@ -207,10 +257,7 @@
             </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">
                     <ul class="phone-menu__list">
                         <li>
                             <a href="#">спецификация</a>
@@ -218,6 +265,49 @@
                         <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>
@@ -257,76 +347,23 @@
                 </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>
-                </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">
                 <div class="phone-search__content">
                     <input type="text" class="phone-search__input" placeholder="Поиск">
 
-                    <div class="phone-search__found active">
+                    <div class="phone-search__found">
                         <!-- <p class="text-1">
                             К сожалению, по вашему запросу ничего не найдено
                         </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">
                         
                             <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>
+                        </div> -->
                     </div>
                 </div>
             </div>