1

Пример
Помогите с оптимальной настройкой (концепцией) открывающегося поиска по клику:

  • Зелёная иконка - 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):

  1. При нажатии на иконку поиска label class="label", меняет класс class="label active".
  2. А окно поиска input id="search" меняется на id="search active".
  3. Кнопка закрытия не обязательна. В Jquery прописано закрытие при потере фокуса.

PS. Прошу помочь в рамках вопроса и данных в нём. Тут возникает ряд проблем: корректная подмена иконок, но это выполнимо с помощью z-index. Другая важная проблема, если задавать для input width: 0, перестаёт работать клик на планшетах.

1
  • Думаю, кнопка "закрыть" - лишняя. Посмотрите на поиск в шапке этого сайта. Поиск закрывается, как только поле теряет фокус. Commented 16 июл. 2017 в 15:41

2 ответа 2

4

Как например:

$('.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>

1
  • Благодарю за ответ! К сожалению разметка шаблона другая и jquery работает иначе.
    – Sylon
    Commented 18 июл. 2017 в 14:58
2

Думаю, кнопка «закрыть» — лишняя. Посмотрите на поиск в шапке этого сайта. Поиск закрывается, как только поле теряет фокус.

Если отказаться от этой кнопки, то можно собрать вариант на чистом 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">

7
  • Благодарю! Но тут задача как упорядочить кнопки "Открыть" и "Интер" в рамках данной html разметки и кода Jquery. Это актуально для очень большого сообщество так как готовые jquery и html являются стандартным шаблоном платформы Magento 2. К сожалению пока не смог найти решения с помощью css... Тут в принципе jquery не важен в ответе. А именно ответ на вопрос как скрыть одну кнопку за другой и обратно.
    – Sylon
    Commented 17 июл. 2017 в 7:47
  • Менял разметку, чтобы перекрашивать иконку с&nbsp;помощью соседних селекторов. Без перекрашивания можно оставить другую разметку. Commented 17 июл. 2017 в 7:51
  • Добавил вариант решения для вашего расположения блоков. Commented 17 июл. 2017 в 8:08
  • Проблема в том, что в таком варианте отсутствует button type="submit", а по факту она есть и она находится над label class="label" (имеется ввиду визуализация, а не html). Из-за этого не могу найти решение, как спрятать корректно button type="submit" до нажатия label class="label". Сейчас получается они обе видны...
    – Sylon
    Commented 17 июл. 2017 в 8:26
  • На рисунке в вопросе где находится кнопка submit? Что мешает добавить блок с этой кнопкой после блока с полем поиска? Commented 17 июл. 2017 в 8:31

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.