Добавление поиска по сайту на ваш веб-сайт значительно улучшает взаимодействие с пользователем и позволяет пользователям быстро находить на вашем веб-сайте контент, который они ищут. Расширяемый поиск обеспечивает необходимую функциональность поиска, сводя к минимуму его влияние на ваш дизайн. Этот пост делает еще один шаг вперед, показывая вам, как добавить расширяемый значок поиска по сайту в навигацию по вашему сайту.

Попробуйте здесь, на JSFiddle

Ниже приведены HTML, CSS и JavaScript, необходимые для добавления расширяемого поиска по сайту в вашу навигацию. Наслаждаться.

Шаг 1

Скопируйте и вставьте приведенный ниже HTML-код туда, где вы хотите, чтобы значок поиска отображался в навигации вашего веб-сайта.

<div class="container">
    <form class="searchbox">
        <input type="search" placeholder="Search..." name="search" class="searchbox-input" onkeyup="buttonUp();" required>
        <input type="submit" class="searchbox-submit">
        <span class="searchbox-icon"><i class="fa fa-search" aria-hidden="true"></i></span>
    </form>
</div>

Шаг 2

Скопируйте и вставьте приведенный ниже CSS в таблицу стилей вашего веб-сайта, чтобы добавить стиль к вашему новому поиску по сайту.

.container{
    width:600px;
    margin:50px auto;
}
.searchbox{
    position:relative;
    min-width:50px;
    width:0%;
    height:50px;
    float:right;
    overflow:hidden;    
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}
.searchbox-input{
    top:0;
    right:0;
    border:0;
    outline:0;
    background:#dcddd8;
    width:100%;
    height:50px;
    margin:0;
    padding:0px 55px 0px 20px;
    font-size:20px;
    color:red;
}
.searchbox-input::-webkit-input-placeholder {
    color: #d74b4b;
}
.searchbox-input:-moz-placeholder {
    color: #d74b4b;
}
.searchbox-input::-moz-placeholder {
    color: #d74b4b;
}
.searchbox-input:-ms-input-placeholder {
    color: #d74b4b;
}
.searchbox-icon,
.searchbox-submit{
    width:50px;
    height:50px;
    display:block;
    position:absolute;
    top:0;
    font-family:verdana;
    font-size:22px;
    right:0;
    padding:0;
    margin:0;
    border:0;
    outline:0;
    line-height:50px;
    text-align:center;
    cursor:pointer;
    color:#FFFFFF;
    background:#ff0000;
}
.searchbox-open{
    width:100%;
}

Шаг 3

Скопируйте и вставьте приведенный ниже код JavaScript и укажите его в своем HTML-файле, чтобы сделать значок поиска расширяемым.

$(document).ready(function(){
            var submitIcon = $('.searchbox-icon');
            var inputBox = $('.searchbox-input');
            var searchBox = $('.searchbox');
            var isOpen = false;
            submitIcon.click(function(){
                if(isOpen == false){
                    searchBox.addClass('searchbox-open');
                    inputBox.focus();
                    isOpen = true;
                } else {
                    searchBox.removeClass('searchbox-open');
                    inputBox.focusout();
                    isOpen = false;
                }
            });  
             submitIcon.mouseup(function(){
                    return false;
                });
            searchBox.mouseup(function(){
                    return false;
                });
            $(document).mouseup(function(){
                    if(isOpen == true){
                        $('.searchbox-icon').css('display','block');
                        submitIcon.click();
                    }
                });
        });
            function buttonUp(){
                var inputVal = $('.searchbox-input').val();
                inputVal = $.trim(inputVal).length;
                if( inputVal !== 0){
                    $('.searchbox-icon').css('display','none');
                } else {
                    $('.searchbox-input').val('');
                    $('.searchbox-icon').css('display','block');
                }
            }

Шаг 4

Добавьте следующие включения в начало вашего HTML-файла.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

Демо на JSFiddle

Скачать с GitHub

Первоначально опубликовано здесь, в блоге Солодева

Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.