• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Выдвигающаяся форма поиска с помощью CSS3 (Стильное поле поиска на при помощи HTML И CSS)
Выдвигающаяся форма поиска с помощью CSS3
Kosten
Дата: Воскресенье, 30.09.2018, 02:31 | Сообщение 1
Администраторы
Сообщений:18238
Награды: 55


В данном материале представлена красивая, плюс раскрывающееся форма поиска по сайту. Где по умолчанию или при открытие страницы пользователи или гости сайта изначально увидят кнопку. Но по клика она разворачивается, где можно прописать теги, по которым быстро найти нужный материал. Также здесь присутствует красивый стиль, как исполнена функция, что можно увидит на на стандартной стилистике, так на современном дизайн, где возможно под него выстраивали такой поиск.

Также можно стиль считать, как базовый элемент пользовательского интерфейса, который в будущем после установки будет служить по своему прямому назначению, это помогая гостям, которые попали на сайт, и также пользователям легко перемещаться по ресурсу по тем запросам, который нашли с помощью поиска.

Нужно знать, что элементы поиска идет одной строкой, которую обычно размещает на видном месте для работы по навигации, где безусловно будет имеет свои преимущество. Также это хорошо экономит время, для того, чтоб найти заданный материал.



Приступаем к установке:

HTML

Код
<div id="gukopes-tamikdun">
  <div id="app">
    <div id="circle">
      <form method="get" action="" id="form">
        <input type="text" name="q" id="search-input" placeholder="Search" autocomplete="off" required>
      </form>
      <div id="kasdgu-ktecun"></div>
    </div>
    <div id="nyresa-colpdgun"></div>
    <div id="cetuki-mebocsa"></div>
    <input type="submit" id="kgosum-uysedas" form="form">
  </div>
</div>


CSS

Код
#gukopes-tamikdun
{
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 350px;
    margin: -34px auto 0 auto;
}

#app
{
    position: relative;
    height: 48px;
    padding: 10px;
}

#app:after
{
    content: '.';
    display: table;
    clear: both;
    height: 0;
    visibility: hidden;
}

form
{
    position: absolute;
    top: 0;
    right: 0;
    left: -260px;
    height: 40px;
    margin: 0 44px 0 18px;
    opacity: 0;
}

#search-input
{
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
    padding: 0;
    border: 0;
    background-color: transparent;
}

#search-input::placeholder
{
    color: #f1f1f1;
}

#circle
{
    position: relative;
    width: 48px;
    height: 48px;
    float: right;
    box-sizing: border-box;
    border: 4px solid #fff;
    border-radius: 100px;
    overflow: hidden;
}

#kasdgu-ktecun
{
    right: -3px;
    top: -12px;
    margin: -2px -2px 0 0;
    transform: rotateZ(45deg);
}

#kasdgu-ktecun:before, #kasdgu-ktecun:after
{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 50%;
}

#kasdgu-ktecun:before
{
    top: 0;
}

#kasdgu-ktecun:after
{
    bottom: 0;
}

#nyresa-colpdgun
{
    right: 9px;
    bottom: 0;
    transform: rotateZ(-45deg);
}

#nyresa-colpdgun, #kasdgu-ktecun
{
    position: absolute;
    width: 4px;
    height: 22px;
    border-radius: 0px;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.41, 1.42) all;
}

#nyresa-colpdgun, #kasdgu-ktecun:before, #kasdgu-ktecun:after
{
    background-color: #fff;
}

#circle, form.active
{
    transition: 0.3s ease all;
}

#kgosum-uysedas, #cetuki-mebocsa
{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

#kgosum-uysedas
{
    opacity: 0;
    z-index: -1;
}

#kgosum-uysedas.active
{
    z-index: 2;
}

#cetuki-mebocsa
{
    z-index: 1;
}

#app.active #circle
{
    width: 100%;
}

form.active
{
    left: 0;
    opacity: 1;
}

#app.active #nyresa-colpdgun
{
    transform:rotateZ(-46deg) translateY(-33px);
}

#app.active #nyresa-colpdgun.change
{
    border-radius: 0px 0px 4px 4px;
    transform:rotateZ(-90deg) translateY(-33px) translateX(22px);
}

#app.active #kasdgu-ktecun
{
    transform:rotateZ(45deg) translateY(33px);
}

#app.active #kasdgu-ktecun.change:before
{
    top: -4px;
    left: -5px;
    transform: rotateZ(90deg) translateX(10px);
}

#dribbble
{
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    text-decoration: none;
    padding: 20px;
}

#dribbble i
{
    display: block;
    width: 20px;
    height: 20px;;
    color: #fff;
    font-size: 20px;
    line-height: 1;
}


JS

Код
$(function()
{
    var initButton = $('#cetuki-mebocsa'), app = $('#app'), form = $('#form'), searchInput = $('#search-input'), rcBtns = $('#kasdgu-ktecun, #nyresa-colpdgun'), submitButton = $('#kgosum-uysedas');

    function initApp()
    {
        app.toggleClass('active');

        if( form.hasClass('active') )
            form.removeClass('active');
        else
        {
            setTimeout(function(){ form.addClass('active'); },40);
            setTimeout(function(){ searchInput.focus(); },600);
        }
    }

    function checkInput()
    {
        if( $(this).val().trim().length > 0 )
        {
            rcBtns.addClass('change');
            submitButton.addClass('active');
        }
        else
        {
            rcBtns.removeClass('change');
            submitButton.removeClass('active');
        }
    }

    initButton.on('click',initApp);
    searchInput.on('keyup',checkInput);
});


Демонстрация
Прикрепления: 9393297.jpg(16.4 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Выдвигающаяся форма поиска с помощью CSS3 (Стильное поле поиска на при помощи HTML И CSS)
  • Страница 1 из 1
  • 1
Поиск: