Мини-поиск: создаем динамичный дизайн для строки поиска на сайте. Адаптация к мобильным часто требует минимизации элементов. К ряду таких элементов относится строка поиска.
На картинке: строка поиска на сайте интернет-магазина угг uggmoda.ru
Определим внешний вид нашего мини поиска. Он у нас будет выступать в трех ипостасях:
- Пассивный — строка поиска не видна, доступен только значок поиска
- Промежуточное состояние мини поиска — строка поиска видна, но поиск по-прежнему неактивен: посетитель нажал значок поиска, но еще ничего не ввел в строку.
- Активный мини поиск — посетитель начал вводить какие-то символы в строку поиска. Активируется кнопка поиска на месте значка, который без активации служит открытию/закрытию строки поиска — а при активации становится действующей кнопкой самого поиска.
Итак, нам надо выполнить следующие работы:
- Прописать в html форму мини поиска.
- Задать стили css для строки поиска, значка мини поиска и активного значка мини поиска.
- Спрограммировать вывод строки поиска при нажатии на значок.
- Спрограммировать закрытие строки поиска (убирается с зоны видимости) при нажатии на значок.
- Спрограммировать активацию значка поиска при вводе в строку поиска каких-то данных.
Всю программную часть мы будем выполнять скриптами jquery. Стили пропишем в CSS. А сейчас пропишем html форму мини поиска на странице:
Задаем стили CSS для мини поиска.
#welcome2 .arrm{padding:0;height:38px;width:38px;text-align:center;border:1px solid transparent;}
#welcome2.prover .arrm{border:1px solid #636E75;color:#636E75;}
#welcome2 > ul{text-align:right;position:absolute; top:0px;right:40px;width:262px; display:none;background:none;height:40px; z-index:1000; margin:0;padding:0; list-style:none}Строка поиска (css):
#search{position:absolute;top:0px;right:0px;width:260px;z-index:7;}
#search .button-search{position:absolute;left:262px;width:40px;height:40px;cursor: pointer;z-index:10001;line-height:40px;background:#636E75;color:#fff;text-align:center;}
#search input{margin:0;background:#FFF;padding:0 10px;width: 240px;height: 38px;border: 1px solid #636E75;
}
#search input:focus{outline:none;}Адаптация для мобильных (уменьшаем мини поиск, давая пространство другим элементам в «шапке» сайта):
@media (max-width: 767px) {
#welcome2 > ul{right:60px}
#search{width:180px;}
#search input{width:160px;}
#search .button-search{left:180px;}
}Программная часть мини поиска выполняется jquery-скриптами (должна быть подгружена jquery-библиотека):
Ок.