Автор

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

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

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


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

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


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

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


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

Сегодня мы решили подготовить хорошиую css3 галерею. Без использования javascript. Да, да, вы правильно поняли. Сегодня мы не будем использовать скрипты. Это будет чистая CSS3 фото галерея. Фотографии в галерее будет увеличиваться, если мы будем нажимать на них мышью.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close