Лого www.SiteHere.ru

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

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

Стиль 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/

Выдвигающаяся форма поиска на сайт 5.00/5 (100.00%) 5 голос(ов)

Понравилась статья - расскажи друзьям! :)

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

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

     
    • Юрий

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

       
  • Денис

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

     
    • Юрий

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

       
      • Денис

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

         
  • Илья

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

     
    • Юрий Немец

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

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

       
  • Дмитрий

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

     
    • Юрий Немец

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

       

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

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