Виїжджають рядок пошуку

Посібник по тому, як зробити мобільно-орієнтовану і адаптивну рядок пошуку

Сьогодні ми б хотіли показати вам, як реалізувати ефект, як на зображенні зверху. Мета - поліпшити сумісність з мобільними пристроями і старими браузерами (IE 8+). Навіть якщо на перший погляд це здається простою штукою, то скажу, що нам довелося застосувати кілька трюків, щоб змусити весь механізм працювати, як гадалося.

Загалом, чого ми хочемо добитися від рядка пошуку:

Тепер ми визначилися з усім, що нам потрібно зробити, давайте почнемо з розмітки.

У розмітці використовуємо основний контейнер, форму, текстове поле і кнопку відправки, а також span-елемент для іконки:

Взагалі-то для іконки можна використовувати псевдо-елемент, але так як він не розрахований на замінних елементах, якими є елементи форми, ми просто використовуємо елемент span.

Тепер, коли всі елементи на своїх місцях, стилізуємо їх.

Виходячи з наших вимог, спершу переконаємося, що у нас є кнопка з видимої іконкою пошуку. Все інше має бути сховане. Але також подумаємо на крок вперед і уявімо, що трапиться, коли ми розширимо рядок пошуку (з основним контейнером). Як нам це зробити? Використовуємо властивість overflow: hidden. а зміна ширини контейнера sb-search має проявити поле введення.

Так що в першу чергу стилізуємо контейнер sb-search. Змусимо його перебувати в плаваючому стані справа, і поставимо йому overflow: hidden. Його вихідна ширина буде дорівнювати 60px, але так як ми хочемо анімувати до ширини 100%, це призведе до проблем в мобільних браузерах (iOS). Вони не люблять переходи з піксельної ширини в процентну. У цьому випадку вони просто не здійснять перехід. Так що замість цього задамо мінімальну ширину в 60px, а ширину в 0%.

Також додамо перехід для ширини властивістю -webkit-backface-visibility: hidden, що позбавить від небажаних "хвостів" на мобільних браузерах (iOS):

Все, що виходить за рамки цього прямокутника, не з'явиться.

Тепер, давайте спозіціоніруем поле введення. Ми використовуємо процентну ширину, так що коли ми розсунемо батьківський елемент, поле введення розшириться разом з ним. Виставлення правильної висоти, розміру шрифту і полів гарантує, що текст буде відцентровано (line-height не відпрацьована в IE8 як могло б очікуватися, так що замість цього використовуємо поля). Абсолютне позиціонування поля введення не обов'язково, але воно вирішує противну проблемку з тим, що іноді при закритті поля пошуку на короткий період часу воно відображається праворуч від кнопки.

На додаток до всього, ми прибираємо стандартні стилі полів введення браузерів для движка WebKit.

Давайте задамо кольору тексту, використовуючи власні властивості конкретних браузерів:

А тепер подбаємо про іконці пошуку на кнопці відправки форми. Ми хочемо, щоб вони розташовувалися в одному місці, одна під інший, так що спозіціоніруем їх щодо правого кута і поставимо однакові розміри. Так як вони повинні розташовуватися одна поверх іншої, спозіціоніруем їх абсолютно:

У початковому положенні ми хочемо, щоб клікабельно була іконка пошуку, а коли ми розкриємо поле пошуку, ми хочемо щоб клікабельно була кнопка відправки форми. Так що спочатку поставимо кнопці відправки форми z-index = -1, і зробимо її прозорою, так щоб ми завжди бачили span з іконкою пошуку:

Чому б просто не зробити її фон прозорим? Та тому, що це не працює в IE, так як елемент не є клікабельним. Так що замість цього ми використовуємо суцільний фон, і виставляємо елементу прозорість в 0.

Іконка пошуку спочатку буде мати високий z-index, так як нам треба, щоб вона виводилося поверх всього. Використовуємо псевдо-елемент: before. щоб додати іконку пошуку:

Не забудьте підключити іконочние шрифт на самому початку нашого CSS:

Давайте змінимо колір іконки пошуку і виставимо його за кнопкою відправки форми, задавши z-index менше значення:

І, нарешті, поставимо кнопці відправки форми z-index більш високе значення, щоб ми могли на нього клікнути:

Почнемо з перемикання класу sb-search-open. Будемо додавати клас тоді, коли буде проводитися клік на основний контейнер (sb-search) і прибирати його тоді, коли буде проведений клік по кнопці відправки форми, але тільки, якщо в поле нічого не записано. Інакше ми просто відправимо форму. Щоб не видаляти клас при кліці на поле введення (так як наші тригери задані для всього контейнера), потрібно запобігти спливання події click на цьому елементі. Це означає, що при кліці на поле вводиться не буде викликано подію click для батьківських елементів.

Далі потрібно додати записи, щоб видалити класу sb-search-open, якщо ми натискаємо кудись за межами нашої рядки пошуку. Для того, щоб це працювало також треба подбати про Спливання подій при кліці на основний контейнер.

Ще одна штука, про яку треба подбати - видалення зайвих символів пробілів з початку і з кінця рядка.

Також при кліці на іконку пошуку, потрібно зробити так, щоб фокус переміщувався на поле введення. Так як це викликає уривчасту отрисовку на мобільних пристроях (iOS), так як в цей же час відкривається і клавіатура, то нам треба якось запобігти відкриття клавіатури для таких випадків. Коли ми закриваємо поле пошуку, потрібно прибрати з нього фокус. Це вирішує проблеми, коли на деяких пристроях після закриття поля пошуку все ще відображається миготливий курсор.

Щоб все це працювало плавно на мобільних пристроях, потрібно задати відповідні тач-події. Додавши preventDefault в функцію initSearchFn запобіжить одночасне спрацьовування подій тапа по екрану і кліка для мобільних пристроїв.

І, нарешті, для браузерів, які не підтримують addEventListener і removeEventListener. використовуватимемо EventListener від Jonathan Neal.

І ось воно! Сподіваюся, вам сподобалося дане керівництво, і ви почерпнули з нього щось корисне для себе!

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!