Добавление поиска по сайту на ваш веб-сайт значительно улучшает взаимодействие с пользователем и позволяет пользователям быстро находить на вашем веб-сайте контент, который они ищут. Расширяемый поиск обеспечивает необходимую функциональность поиска, сводя к минимуму его влияние на ваш дизайн. Этот пост делает еще один шаг вперед, показывая вам, как добавить расширяемый значок поиска по сайту в навигацию по вашему сайту.
Ниже приведены 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">
Первоначально опубликовано здесь, в блоге Солодева
Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.