сделал js search

This commit is contained in:
Kirill Pet
2024-12-19 18:29:57 +03:00
parent f32e1eb3fb
commit dec1a3b62a
5 changed files with 347 additions and 134 deletions

View File

@@ -91,7 +91,10 @@
</div>
<div class="header-phone__item">
<img src="/assets/img/icon/search.svg" alt="search">
<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,153 +225,75 @@
<div class="phone-menu__content">
<button class="phone-menu-content__close"></button>
<ul class="phone-menu__list">
<li>
<a href="#">спецификация</a>
</li>
<li>О компании</li>
<li>
<a href="#" class="phone-menu--next" data-menu="cardio">каталог</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>
<p class="title-1">
Каталог
</p>
<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>
</li>
<li>О компании</li>
<li>
<a href="#" class="phone-menu--next" data-menu="cardio">каталог</a>
<a href="#" class="phone-menu--next" data-menu="cardio">Кардио</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>
<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>зонирование</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 cardio">
<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 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>
<div class="phone-search">
<div class="phone-search__content">
<input type="text" class="phone-search__input" placeholder="Поиск">
<div class="phone-search__found">
<!-- <p class="text-1">
К сожалению, по вашему запросу ничего не найдено
</p> -->
<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>
</header>
<main class="wrapper">