Помогите с оптимальной настройкой (концепцией) открывающегося поиска по клику:
- Зелёная иконка -
class="label"
. При нажатии едет вправо и становится крестиком (функция: открыть - закрыть). - Синяя иконка (скрыта до клика) -
class="action"
, выполняет роль Enter. - Форма для вставки поискового запроса -
input id="search"
.
<div class="field search">
<label class="label" for="search" data-role="minisearch-label"></label>
<div class="control">
<input id="search" class="search-autocomplete">
</div>
</div>
<div class="actions">
<button type="submit" title="<?php echo $block->escapeHtml(__('Search')) ?>" class="action search">
</button>
</div>
@media screen and (max-width: 768px) {
.label {
float: left;
.label.active+.control input{
position: static;
}
input {
left: -300%;
margin: 15px 0;
position: absolute;
}
}
//
// Desktop
// _____________________________________________
@media screen and (min-width: 768px) {
.label {
position: absolute;
}
.label.active+.control input{
width: 250px;
}
input {
padding: 0;
position: static;
margin: 0;
width: 0;
}
}
Работа JS (Jquery):
- При нажатии на иконку поиска
label class="label"
, меняет классclass="label active"
. - А окно поиска
input id="search"
меняется наid="search active"
. - Кнопка закрытия не обязательна. В Jquery прописано закрытие при потере фокуса.
PS. Прошу помочь в рамках вопроса и данных в нём.
Тут возникает ряд проблем: корректная подмена иконок, но это выполнимо с помощью z-index
. Другая важная проблема, если задавать для input width: 0
, перестаёт работать клик на планшетах.