Форма поиска с расширенными параметрами фильтрации и быстрыми ссылками.
Получение правильного поиска - это всегда непростая задача. Исходной точкой всегда является форма поиска, которая в большинстве случаев состоит только из поля ввода и кнопки отправки. Страница результатов поиска может быть сложной задачей, особенно если у вас разные категории контента.
Для крупных веб-сайтов и интернет-магазинов важно, однако, попытаться предвидеть движение пользователя. Мы должны учитывать, что часто наши пользователи не знают, где найти конкретную информацию на нашем веб-сайте. В этих случаях они склонны обращаться к форме поиска. Предоставление параметров фильтрации и быстрых ссылок - это способ сузить опыт поиска до того, чего действительно интересует пользователь, а также способ создания более простых и более ориентированных страниц результатов поиска.
Вот быстрая анимация, которая показывает нашу расширенную форму поиска в действии:
Создание структуры
Структура 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 -->
Добавление стиля
На небольших устройствах (ширина видового экрана меньше 1024 пикселей) основная навигация и форма поиска находятся на правой стороне, скрытые по умолчанию; Когда пользователь нажимает значок меню, элементы <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 {
/* search form open */
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 {
/* trigger search form animation if <header> has the .animate-search class */
animation: cd-slide-in 0.3s;
}
.animate-search .is-visible .cd-search-suggestions {
/* trigger the dropdown animation if <header> has the .animate-search class */
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);
}
}Если вы предпочитаете базовый эффект затухания (а не анимацию формы поиска), вы можете удалить класс .animate-search из элемента <header>.
О выборе категории: чтобы выбор ширины div.cd-select изменялся в соответствии с выбранной пользователем опцией, элемент <select> находится в абсолютном положении (поэтому он не занимает пробел), а значение span.selected-value Используется для отображения выбранной опции (ее текст изменяется, когда пользователь выбирает новый параметр с помощью jQuery).
@media only screen and (min-width: 1024px) {
.cd-main-search .cd-select {
position: absolute;
right: 0;
overflow: hidden;
}
.cd-main-search select {
/* the <select> element is not visible - it is covered by the .selected-value element */
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>. На небольших устройствах мы хотели, чтобы навигация была на стороне, скрытой по умолчанию, и нам было легче иметь ее вне <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) ) {
//desktop screen - insert navigation and search form inside <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)) {
//mobile screen - move navigation and search form after .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>.
