Автор

08 06.2017
Расширенный поиск на jQuery

Расширенный поиск на jQuery


Форма поиска с расширенными параметрами фильтрации и быстрыми ссылками.

 

ДЕМО
ИСХОДНИКИ

 

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

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

Вот быстрая анимация, которая показывает нашу расширенную форму поиска в действии:

 

Создание структуры

Структура 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>.

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

06 06.2014
Расширенный поиск на jQuery

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


19 04.2013
Расширенный поиск на jQuery

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


16 04.2013
Расширенный поиск на jQuery

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


19 04.2013
Расширенный поиск на jQuery

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


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close