Создание удобной формы поиска — совершенно нетривиальная задача. В большинстве случаев всё заканчивается на текстовом поле, куда нужно вбивать интересующие слова и кнопкой поиска. В нашем же случае будет добавлена возможность фильтрации поиска по определённому типу контента, а так же показ результатов в отдельном блоке.

Для крупных порталов и интернет-магазинов задуманный функционал исключительно важен. Как правило, пользователь без понятия где на нашем сайте можно найти ту или иную информацию. Именно поэтому формы поиска не теряют своей актуальности. Фильтрация и быстрые ссылки — это прекрасная возможность сэкономить время пользователя.

HTML структура

HTML структура будет разделена на три части: элемент <header> для навигации, div.cd-main-search для формы поиска и main.cd-main-contentдля основного контента страницы.

<header class="cd-main-header animate-search">
 <div class="cd-logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div>

 <nav class="cd-main-nav-wrapper">
 <a href="#search" class="cd-search-trigger cd-text-replace">Search</a>

 <ul class="cd-main-nav">
 <li><a href="#0">Products</a></li>
 <!-- additional navigation items -->
 </ul>
 </nav>

 <a href="#0" class="cd-nav-trigger cd-text-replace">Menu<span></span></a>
</header>

<main class="cd-main-content">
 <!-- your content here -->
</main>

<div id="search" class="cd-main-search">
 <form>
 <input type="search" placeholder="Search...">

 <div class="cd-select">
 <span>in</span>
 <select name="select-category">
 <option value="all-categories">all Categories</option>
 <!-- additional options here -->
 </select>
 <span class="selected-value">all Categories</span>
 </div>
 </form>

 <div class="cd-search-suggestions">
 <div class="news">
 <h3>News</h3>
 <ul>
 <li>
 <a class="image-wrapper" href="#0"><img src="img/placeholder.png" alt="News image"></a>
 <h4><a class="cd-nowrap" href="#0">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></h4>
 <time datetime="2016-01-12">Feb 03, 2016</time>
 </li>

 <!-- additional news here -->
 </ul>
 </div> <!-- .news -->

 <div class="quick-links">
 <h3>Quick Links</h3>
 <ul>
 <li><a href="#0">Find a store</a></li>
 <!-- additional quick links here -->
 </ul>
 </div>
 </div> <!-- .cd-search-suggestions -->

 <a href="#0" class="close cd-text-replace">Close Form</a>
</div> <!-- .cd-main-search -->

CSS стили

На устройствах с небольшим дисплеем (менее 1024px), основная навигации и форма поиска будут располагаться по правой стороне и изначально скрыты; при клике по иконке навигации, перемещаем элементы <main> и <header> влево (добавляем класс nav-is-visible) для отображения навигации.

.cd-main-header, .cd-main-content {
 position: relative;
 transition: transform 0.3s;
}
.cd-main-header.nav-is-visible, .cd-main-content.nav-is-visible {
 transform: translateX(-260px);
}

На устройствах с большим экраном форма поиска будет располагаться в верхней части страницы и раскрываться при клике на иконку. При клике по элементу .cd-search-trigger, будет добавлен класс .is-visible для отображения формы.

@media only screen and (min-width: 1024px) {
 .cd-main-search {
 position: absolute;
 z-index: 2;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s, visibility 0.3s;
 }
 .cd-main-search.is-visible {
 /* открытие формы поиска */
 opacity: 1;
 visibility: visible;
 }
}

Для анимации формы добавим класс .animate-search к элементу <header>. Данный класс приводит в действие два разных типа CSS3 анимации:cd-slide-in (для формы) и cd-3d-rotation (для поисковых вариантов).

@media only screen and (min-width: 1024px) {
 .animate-search .cd-main-search.is-visible {
 /* вызываем анимацию если в <header> есть класс .animate-search */
 animation: cd-slide-in 0.3s;
 }
 .animate-search .is-visible .cd-search-suggestions {
 /* вызываем анимацию если в <header> есть класс .animate-search */
 transform-origin: center top;
 animation: cd-3d-rotation 0.5s 0.3s;
 animation-fill-mode: backwards;
 }
}
@keyframes cd-slide-in {
 0% {
 transform: translateY(-100%);
 }
 100% {
 transform: translateY(0);
 }
}

@keyframes cd-3d-rotation {
 0% {
 transform: perspective(1000px) rotateX(-90deg);
 }
 100% {
 transform: perspective(1000px) translateY(0);
 }
}

Если вы предпочитаете простой эффект fade-in (замена анимации формы), то уберите класс .animate-search из элемента <header>.

О выборе категорий: элемент <select> позиционируется абсолютно (текст выбранного элемента меняется при выборе элемента списка через jQuery).

@media only screen and (min-width: 1024px) {
 .cd-main-search .cd-select {
 position: absolute;
 right: 0;
 overflow: hidden;
 }
 .cd-main-search select {
 /* элемент <select> невидим */
 position: absolute;
 right: 0;
 opacity: 0;
 color: transparent;
 }
 .cd-main-search .selected-value {
 color: #ffffff;
 pointer-events: none;
 }
 .cd-main-search select, .cd-main-search .selected-value {
 padding: 0.5em 1.7em 0.5em .3em;
 font-size: 1.4rem;
 border-radius: 3px;
 }
}

Обработка событий

В нашей HTML структуре элемент навигации находится в секции <header>. На устройствах с небольшим экраном хотим, чтобы навигация изначально была скрыта и раскрывалась с правой стороны при клике на соответствующую иконку. Без перемещений элемента тут не обойтись. Для этого воспользуемся возможностями jQuery.

То же самое делаем и с элементом div.cd-main-search: изначально данный элемент находится вне основной навигации. На устройствах с небольшим экраном переместим его в элемент nav.cd-main-nav-wrapper.

var navigationWrapper = $('.cd-main-nav-wrapper'),
 navigation = navigationWrapper.children('.cd-main-nav'),
 searchForm = $('.cd-main-search'),
 navigationTrigger = $('.cd-nav-trigger'),
 mainHeader = $('.cd-main-header');

function moveNavigation(){
 var screenSize = checkWindowWidth(); //returns 'mobile' or 'desktop'
 if ( screenSize == 'desktop' && (navigationTrigger.siblings('.cd-main-search').length == 0) ) {
 //размер ПК - вставляем навигацию и форму поиска в элемент <header>
 searchForm.detach().insertBefore(navigationTrigger);
 navigationWrapper.detach().insertBefore(searchForm).find('.cd-serch-wrapper').remove();
 } else if( screenSize == 'mobile' && !(mainHeader.children('.cd-main-nav-wrapper').length == 0)) {
 //небольшие экраны - перемещаем навигаци и форму поиска в элемент после .cd-main-content element
 navigationWrapper.detach().insertAfter('.cd-main-content');
 var newListItem = $('<li class="cd-serch-wrapper"></li>');
 searchForm.detach().appendTo(newListItem);
 newListItem.appendTo(navigation);
 }
}

Для отслеживания кликов воспользуемся возможностями jQuery. Так же через данный инструмент будет добавлять/удалять классы, а так же сменять текст span.selected-value при смене активного значения элемента <select>.