Exore LTD » jQuery » Выдвигающаяся форма поиска на сайт
Лого SiteHere.ru

Май 14, 2020 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

Выдвигающаяся форма поиска на сайт

Выдвигающаяся форма поиска на сайт

Стиль Flat обрел немалую популярность при дизайне сайтов. И в этом уроке мы рассмотрим еще один элемент сайта, который сделан в этом стиле. Это элемент — форма поиска. Но не простая форма поиска, а форма поиска которая появляется при нажатии и «сворачивается» если ее не используют. Что касается иконки поиска, то она берется из SVG-файла и является масштабируемой при различных разрешениях экрана(как на мобильных устройствах, так и на больших мониторах).

Пример можно увидеть здесь:

Посмотреть примерСкачать

Выдвигающаяся форма поиска



Как использовать?

HTML

Сперва определимся с разметкой, которая будет на HTML странице:

1
2
3
4
5
6
7

<div id="sb-search" class="sb-search">
    <form>
        <input class="sb-search-input" placeholder="Что будет искать?" type="text" value="" name="search" id="search">
        <input class="sb-search-submit" type="submit" value="">
        <span class="sb-icon-search"></span>
    </form>
</div>

В форме поиска ничего необычного нет: текстовое поле для ввода, кнопка поиска и элемент <span> для иконки.



CSS

Теперь добавим стилей, чтобы форма поиска красиво смотрелась на странице.

Так как форма поиска будет появляться при клике, то изначально она скрыта. Это делается с помощью свойства overflow и его значением hidden, в результате чего скрывается всё что находится за пределами иконки(в итоге мы видим только иконку, а текстовое поле нет):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.sb-search {
    position: relative;
    margin-top: 10px;
    width: 0%;
    min-width: 60px;
    height: 60px;
    float: right;
    overflow: hidden;
 
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
 
    -webkit-backface-visibility: hidden;
}

Далее позиционируем текстовое поле для ввода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.sb-search-input {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    outline: none;
    background: #fff;
    width: 100%;
    height: 60px;
    margin: 0;
    z-index: 10;
    padding: 20px 65px 20px 20px;
    font-family: inherit;
    font-size: 20px;
    color: #2c3e50;
}
 
input[type="search"].sb-search-input {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
}

Определяем цвет текста, который находится на фоне запроса(текста, который мы вводим при поиске):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.sb-search-input::-webkit-input-placeholder {
    color: #efb480;
}
 
.sb-search-input:-moz-placeholder {
    color: #efb480;
}
 
.sb-search-input::-moz-placeholder {
    color: #efb480;
}
 
.sb-search-input:-ms-input-placeholder {
    color: #efb480;
}
Цвет placeholder

Кнопка поиска находится всегда над остальными блоками и элементами на странице, поэтому задаем ей большое значение z-index:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.sb-icon-search {
    color: #fff;
    background: #e67e22;
    z-index: 90;
    font-size: 22px;
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}
 
.sb-icon-search:before {
    content: "\e000";
}

Также не забываем подключить специальные иконки(SVG). Для того чтобы вставить иконку в кнопке поиска:

1
2
3
4
5
6
7
8
9
10

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon/icomoon.eot');
    src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
        url('../fonts/icomoon/icomoon.woff') format('woff'),
        url('../fonts/icomoon/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}


Javascript

Скачиваем скрипты(uisearch.js, classie.js) и подключаем их в конце страницы:

1
2
3
4
5

<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script>
    new UISearch( document.getElementById( 'sb-search' ) );
</script>


Вывод

Симпатичная форма поиска, которая занимает очень мало места на сайте и красиво появляется при нажатии на иконку с поиском.


Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

13 комментариев к записи
  • Саматакая

    У меня не работает

     
    Ответить
    • Юрий

      А что происходит после нажатия на иконку поиска?(возможно у вас отключен javascript в браузере)

       
      Ответить
  • Денис

    Привет! У меня тоже не работает, а очень хотелось бы 🙄

     
    Ответить
    • Юрий

      Денис, а почему в демо работает?

       
      Ответить
      • Денис

        Я уже все испробовал, разные варианты подключения скрипта, думал что в этом дело. Сама кнопка поиска появляется, а при нажатии ничего не происходит. А варианта по-проще нет? ❓

         
        Ответить
  • Илья

    У меня не работает сам поиск по сайту, то есть поле для поиска разварачивается но сам поиск не работает(страница просто обновляется при нажатии клавиши enter и все)

     
    Ответить
    • Юрий Немец

      Добрый день, Илья!

      В данной статье представлен лишь шаблон формы, к функционалу на Вашем сайте это не имеет никакого отношения.

       
      Ответить
      • Геннадий

        Как сделать функциональной?

         
        Ответить
  • Дмитрий

    Вставил ваш код, после нажатия на кнопку форма смещается вниз, после повторного нажатия возвращается обратно, в чем дело?

     
    Ответить
    • Юрий Немец

      Дмитрий, в демо у Вас точно также происходит?

       
      Ответить
  • Валерий

    Здравствуйте.
    Возможно ли Ваше решение выезжающей формы поиска реализовать на:
    Всё по умолчанию: Joomla! 3.8.12 VirtueMart 3.4.2 шаблон protostar и модуль поиска VM — Search in Shop
    Спасибо.

     
    Ответить
  • Сергей

    Любую форму, в том числе и эту можно прикрутить к любому движку.
    Для этого нужны только прямые руки.

    Без обиды  — но ваш вопрос выглядит примерно так: а можно ли этой кружкой пить чай из чайника марки Мулинекс? А из чайника Бош? А из чайника… и т.д.

    Надо учить матчасть, и тогда всё получится как дважы два.

     
    Ответить
  • Руслан

    Все работает… Когда посмотрев исходники. Оказывается что там два css файла.

    А что Вы тут описывали, не полная инфа… Я к примеру разобрался, что и как… Но в описании Вы не полностью расписали.. Допустим, юзер будет делать форму по описании не скачивая исходники, ничего не выйдет…

    Так, что резюмируя, описуху сделайте более развернуто, нежели на половину….

    А так, все хорошо робит…

     
    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *