Помогите с оптимальной настройкой (концепцией) открывающегося поиска по клику:
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>
Работа JS (Jquery):
label class="label"
, меняет класс class="label active"
.input id="search"
меняется на id="search active"
.PS. Прошу помочь в рамках вопроса и данных в нём.
Тут возникает ряд проблем: корректная подмена иконок, но это выполнимо с помощью z-index
. Другая важная проблема, если задавать для input width: 0
, перестаёт работать клик на планшетах.
Как например:
$('.search__trigger').on('click', function(e){
e.preventDefault();
var
$this = $(this),
ico = $this.find('.fa'),
form = $this.closest('.search__form');
if(!form.hasClass('open')){
form.addClass('open');
ico.toggleClass('fa-search fa-close');
}else {
form.removeClass('open');
ico.toggleClass('fa-close fa-search');
}
});
* {
box-sizing: border-box;
}
.row {
position: relative;
padding-left: 30px;
}
.search__trigger,
.search__enter {
border: none;
background: transparent;
font-size: 1rem;
display: block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
position: absolute;
top: 0;
left:0;
}
.search__input {
height: 30px;
width: 100%;
padding: 10px;
border: none;
background: transparent;
font-size: 1rem;
left: auto;
border-bottom: 2px solid #009eba;
}
.search__trigger {
color: #77ab46;
text-decoration: none;
z-index: 2;
transition: all .35s ease-in-out;
}
.search__enter {
color: #009eba;
opacity: 0;
z-index: 1;
transition: opacity .35s ease-in-out;
}
.search__input-wrap {
display: block;
overflow: hidden;
width: 0%;
transition: width .35s ease-in-out;
}
.open .search__input-wrap {
width: 100%;
}
.open .search__trigger {
left: 92%;
}
.open .search__enter {
opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<form class="search__form">
<div class="row">
<a href="#" class="search__trigger">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
<label for="search" class="search__input-wrap">
<input type="search" name="search" id="search" class="search__input">
</label>
<button type="submit" class="search__enter">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
</form>
Думаю, кнопка «закрыть» — лишняя. Посмотрите на поиск в шапке этого сайта. Поиск закрывается, как только поле теряет фокус.
Если отказаться от этой кнопки, то можно собрать вариант на чистом CSS, без скриптов. Чтобы поиск закрылся, достаточно щёлкнуть мышью за его пределами:
https://codepen.io/glebkema/pen/awxjdv
.search__control {
border: none;
border-bottom: 2px solid transparent;
width: 0;
}
.search__control:focus {
border-bottom-color: #11accf;
outline: none;
width: 200px;
}
.search__control::-webkit-input-placeholder { color: #11accf !important; }
.search__control::-moz-placeholder { color: #11accf; }
.search__control:-moz-placeholder { color: #11accf; }
.search__control:-ms-input-placeholder { color: #11accf; }
.search__control::placeholder { color: #11accf; }
.search__label {
color: #84b559;
cursor: pointer;
float: left;
margin-right: 9px;
}
.search__control:focus + .search__label {
color: #11accf;
cursor: auto;
}
.search__control,
.search__label {
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
<div class="search">
<input class="search__control" id="search" type="text" placeholder="Search">
<label class="search__label" for="search"><i class="fa fa-search"></i></label>
</div>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Аналогичный вариант можно применить и к другому расположению лейбла и поля, но тогда не удастся перекрашивать лейбл с помощью соседних селекторов:
.search__control input {
border: none;
border-bottom: 2px solid transparent;
width: 0;
}
.search__control input:focus {
border-bottom-color: #11accf;
outline: none;
width: 200px;
}
.search__control input::-webkit-input-placeholder { color: #11accf !important; }
.search__control input::-moz-placeholder { color: #11accf; }
.search__control input:-moz-placeholder { color: #11accf; }
.search__control input:-ms-input-placeholder { color: #11accf; }
.search__control input::placeholder { color: #11accf; }
.search__label {
color: #11accf;
cursor: pointer;
margin-right: 9px;
}
.search__control input,
.search__label {
float: left;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
<div class="search">
<label class="search__label" for="search"><i class="fa fa-search"></i></label>
<div class="search__control">
<input id="search" type="text" placeholder="Search">
</div>
</div>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Как сделать, чтобы я мог открывать сформированную в php ссылку на страницу в отдельном окне(в iframe)?
Ребята подскажите плагин или код который при переворачивании устройства выведит блок на весь экран с текстом переверните устройство