Гибкая форма поиска

demosourse

Форма поиска с параметрами фильтрации, а так же ссылками на результат.

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

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

Короткая демонстрация готового результата:

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>.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/advanced-search-form/
Перевел: Станислав Протасевич
Урок создан: 28 Февраля 2016
Просмотров: 8993
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^