сделал js search

8 months ago · dec1a3b62a
parent f32e1eb3fb
commit dec1a3b62a
5 changed files with 339 additions and 126 deletions
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@ -115,8 +115,106 @@
    background-position: center right;
 }
 .header-menu__search{
+    display: flex;
+    align-items: center;
+
+    position: relative;
+}
+.header-menu-search__open{
+    width: 32px;
+    aspect-ratio: 1;
+
+    background: none;
+    overflow: hidden;
+
+    border: none;
+}
+.header-menu__search.active .header-menu-search__open img:first-child{
+    display: none;
+}
+.header-menu-search__block{
+    position: absolute;
+    top: 58px;
+    right: 0;
+
+    width: 400px;
+
+    transition: all .3s;
+
+    pointer-events: none;
+
+    opacity: 0;
+}
+.header-menu__search.active .header-menu-search__block{
+    pointer-events: auto;
+
+    opacity: 1;
+}
+.header-menu-search__input{
+    padding: 14px 64px 14px 24px;
+
+    width: 100%;
+
+    font-weight: 400;
+    font-size: 16px;
+    text-transform: uppercase;
+    color: var(--text-white);
+
+    border: 1px solid var(--text-white);
+    border-radius: 4px;
+
+    background-color: var(--background-grey-hover);
+}
+.header-menu-search__input::placeholder{
+    color: var(--link);
+}
+.header-menu-search__btn{
+    position: absolute;
+    top: 8px;
+    right: 24px;
+
    width: 32px;
    aspect-ratio: 1;
+
+    background: none;
+    border: none;
+
+    background-image: url(/assets/img/icon/search.svg);
+    /* background-image: url(/assets/img/icon/close.svg); */
+}
+.header-menu-search__found{
+    margin-top: 24px;
+
+    padding: 24px;
+
+    background-color: var(--background-grey-hover);
+    border-radius: 4px;
+}
+.header-menu-search__error{}
+.header-menu-search__item{
+    margin-top: 24px;
+
+    display: flex;
+}
+.header-menu-search__item:first-child{
+    margin-top: 0;
+}
+.header-menu-search-item__img{
+    width: 72px;
+    aspect-ratio: 1;
+
+    border-radius: 8px;
+}
+.header-menu-search-item__content{
+    margin-left: 16px;
+}
+.header-menu-search-item__art{
+    margin-top: 8px;
+
+    color: var(--link);
+}
+.phone-search{
+    display: none;
 }
 /* header */

--- a/assets/css/gp-style-tablet.css
+++ b/assets/css/gp-style-tablet.css
@ -130,10 +130,17 @@
    width: 100%;
    transition: all .3s;

+    height: 100vh;
+
    background-color: var(--background-main);
 }
 .phone-menu__sub.active{
    left: 0;
+
+    overflow-y: auto;
+}
+.phone-menu__sub .title-1{
+    margin-bottom: 32px;
 }
 .phone-menu-content__close{
    position: absolute;
@ -217,6 +224,108 @@
 .phone-menu{
    display: block;
 }
+.phone-search{
+    position: absolute;
+    top: 112px;
+    left: 0;
+
+    width: 100%;
+    height: 0;
+
+    display: block;
+
+    transition: all .3s;
+    overflow: hidden;
+}
+.phone-search.active{
+    height: 79px;
+}
+.phone-search.hidden{
+    overflow: visible;
+}
+.phone-search__content{
+    padding: 16px;
+
+    background-color: var(--background-grey-hover);
+}
+.phone-search__input{
+    width: 100%;
+
+    padding: 14.5px 23px;
+
+    font-weight: 400;
+    font-size: 14px;
+    text-transform: uppercase;
+    color: var(--text-white);
+
+    border: 1px solid var(--text-white);
+    border-radius: 4px;
+
+    background-color: rgba(0, 0, 0, 0);
+
+    outline: none;
+}
+.phone-search__input::placeholder{
+    color: var(--link);
+}
+.phone-search__found{
+    position: absolute;
+    top: 95px;
+    left: 16px;
+    right: 16px;
+
+    max-height: 256px;
+    width: calc(100% - 32px);
+
+    padding: 16px;
+
+    background-color: var(--background-grey-hover);
+    border-radius: 4px;
+
+    overflow-y: auto;
+    display: none;
+}
+.phone-search__found.active{
+    display: block;
+}
+.phone-search__item{
+
+}
+
+.phone-search__item{
+    margin-top: 24px;
+
+    display: flex;
+}
+.phone-search__item:first-child{
+    margin-top: 0;
+}
+.phone-search-item__img{
+    width: 64px;
+    aspect-ratio: 1;
+
+    border-radius: 8px;
+}
+.phone-search-item__content{
+    margin-left: 16px;
+}
+.phone-search-item__art{
+    margin-top: 8px;
+
+    color: var(--link);
+}
+.phone__open-search{
+    width: 32px;
+    aspect-ratio: 1;
+
+    overflow: hidden;
+
+    border: none;
+    background-color: rgba(0, 0, 0, 0);
+}
+.phone__open-search.active img:first-child{
+    display: none;
+}
 /* header */

 /* footer */
--- a/assets/img/photo/header-menu-search.png
+++ b/assets/img/photo/header-menu-search.png
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -152,9 +152,22 @@ btnOpenMenu.onclick = function () {
        newHeigh = content.offsetHeight + 'px';

    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;
+}
+
+
 let nextPhoneMenu = document.querySelectorAll('.phone-menu--next');

 nextPhoneMenu.forEach(next => {
@ -165,8 +178,43 @@ nextPhoneMenu.forEach(next => {
        blockSub.classList.add('active');
    }
 })
-// phone menu

+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
+let openBtnSearch = document.querySelector('.header-menu-search__open'),
+    blockSearchPc = document.querySelector('.header-menu__search');
+
+openBtnSearch.onclick = function () {
+    blockSearchPc.classList.toggle('active');
+}
+
+let btnOpenSearchPhone = document.querySelector('.phone__open-search'),
+    searchPhone = document.querySelector('.phone-search');
+
+btnOpenSearchPhone.onclick = function () {
+    if (!searchPhone.classList.contains('hidden')) {
+        setTimeout(() => {
+            searchPhone.classList.add('hidden');
+        }, 300);
+    }else{
+        searchPhone.classList.remove('hidden');
+    }
+
+    btnOpenSearchPhone.classList.toggle('active');
+    searchPhone.classList.toggle('active');
+}
+
+// search end

 // resize
 window.addEventListener('resize', () => {
--- a/index.html
+++ b/index.html
@ -91,7 +91,10 @@
                    </div>
    
                    <div class="header-phone__item">
+                        <button class="phone__open-search">
                            <img src="/assets/img/icon/search.svg" alt="search">
+                            <img src="/assets/img/icon/close.svg" alt="search">
+                        </button>
                    </div>
    
                    <div class="header-phone__item">
@ -128,16 +131,49 @@
                        </li>
                    </ul>

-                    <img src="/assets/img/icon/search.svg" alt="" class="header-menu__search">
+                    <div class="header-menu__search">
+                        <button class="header-menu-search__open">
+                            <img src="/assets/img/icon/search.svg" alt="" >
+                            <img src="/assets/img/icon/close.svg" alt="" >
+                        </button>
+
+                        <div class="header-menu-search__block">
+                            <button class="header-menu-search__btn"></button>
+                            <input type="text" class="header-menu-search__input" placeholder="Поиск">
+
+                            <div class="header-menu-search__found">
+                                <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">Артикул: STP1000C</p>
                                    </div>
                                </div>

+                                <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">Артикул: STP1000C</p>
+                                    </div>
+                                </div>
+
+                                <!-- <p class="header-menu-search__error text-2">
+                                    К сожалению, по вашему запросу ничего не найдено
+                                </p> -->
+                            </div>
+                        </div>
+                    </div>
+                    
+                </div>
+            </div>

            <div class="phone-menu">
                <div class="phone-menu__block-content main">
                    <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>
@ -189,99 +225,33 @@
                    <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="#">спецификация</a>
+                                <a href="#" class="phone-menu--next" data-menu="cardio">Кардио</a>
                            </li>
-                            <li>О компании</li>
                            <li>
-                                <a href="#" class="phone-menu--next" data-menu="cardio">каталог</a>
+                                <a href="#" class="phone-menu--next">механическое кардио</a>
                            </li>
                            <li>
-                                <a href="#" class="phone-menu--next">бренды</a>
+                                <a href="#" class="phone-menu--next">силовые тренажеры</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>
-    
-                            <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>
-    
-                                <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>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="phone-menu__sub brand">
-                    <div class="phone-menu__content">
-                        <button class="phone-menu-content__close"></button>
-    
-                        <ul class="phone-menu__list">
                            <li>
-                                <a href="#">спецификация</a>
+                                <a href="#" class="phone-menu--next">скамьи</a>
                            </li>
-                            <li>О компании</li>
                            <li>
-                                <a href="#" class="phone-menu--next" data-menu="cardio">каталог</a>
+                                <a href="#" class="phone-menu--next">свободные веса</a>
                            </li>
                            <li>
-                                <a href="#" class="phone-menu--next">бренды</a>
+                                <a href="#" class="phone-menu--next">Функциональный тренинг</a>
+                            </li>
+                            <li>
+                                <a href="#" class="phone-menu--next">Уникальные продукты</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>
-    
-                            <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>
-    
-                                <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>
-                        </div>
                    </div>
                </div>

@ -289,52 +259,40 @@
                    <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="#">спецификация</a>
-                            </li>
-                            <li>О компании</li>
-                            <li>
-                                <a href="#" class="phone-menu--next">каталог</a>
-                            </li>
-                            <li>
-                                <a href="#" class="phone-menu--next">бренды</a>
-                            </li>
-                            <li>зонирование</li>
-                            <li>проекты</li>
-                            <li>интересное</li>
-                            <li>контакты</li>
+                            <li>Беговые дорожки</li>
+                            <li>Беговые дорожки</li>
+                            <li>Беговые дорожки</li>
+                            <li>Беговые дорожки</li>
                        </ul>
+                    </div>
+                </div>

-                        <div class="phone-menu__block">
-                            <p class="phone-menu__text">
-                                Работаем с гос.заказчиками по<br>
-                                <a href="">44-ФЗ/223-ФЗ</a>
-                            </p>
+            </div>

-                            <a class="phone-menu__text phone-menu__text--no-line" href="tel:+74957988081">+7 (495) 798-80-81</a>
+            <div class="phone-search">
+                <div class="phone-search__content">
+                    <input type="text" class="phone-search__input" placeholder="Поиск">

-                            <a class="phone-menu__text phone-menu__text--no-line" href="mailto:sales@bestinfitness.ru">sales@bestinfitness.ru</a>
+                    <div class="phone-search__found">
+                        <!-- <p class="text-1">
+                            К сожалению, по вашему запросу ничего не найдено
+                        </p> -->

-                            <div class="phone-social">
-                                <a href="#" class="btn-social">
-                                    <img src="/assets/img/social/telegram.svg" alt="">
-                                </a>
+                        <div class="phone-search__item">
+                            <img src="/assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img">
                        
-                                <a href="#" class="btn-social">
-                                    <img src="/assets/img/social/whatsapp.svg" alt="">
-                                </a>
-                            </div>
+                            <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 class="phone-menu__block">
-                            <a href="#" class="btn-big btn-big--border btn-big--border--blood">
-                                Заказать звонок
-                            </a>
                        </div>
                    </div>
                </div>
-
            </div>
        </header>