Реализуем скрытый поиск, т.е. форма поиска изначально не показана и вызывается нажатие кнопки.
Форму поиска и подложку вставляем в шапку (например, после открытия div main)
<div id="backfon"></div>
<div id="sea">
<form method="get" id="searchform" action="https://opttour.ru/">
<button type="submit" id="pic-sea" value=""><i class="fa fa-search"></i></button>
<input type=text name="s" id='s' placeholder="Поиск" />
</form>
</div>Делаем кнопку или пункт меню с id=search-item
<li class="menu-item search-item"><a><i class="fa fa-search"></i> Поиск</a></li>Script, различные эффекты с помощью анимации
$(document).ready(function() {
//Появление поиска + !курсор в строке поиска
$('.search-item').click(function() {
$('#sea').show();
$('#sea').removeClass('fadeOutDown');
$('#sea').addClass('animated fadeInDown');
$('#backfon').show();
$('#backfon').removeClass('fadeOut');
$('#backfon').addClass('animated fadeIn');
});
// курсор в строку поиска
$('.search-item').click(function() {
$('#s').focus();
});
$('#backfon').click(function() {
$('#backfon').addClass('fadeOut');
$('#sea').addClass('fadeOutDown');
setTimeout(function () { $('#sea').hide(); $('#backfon').hide(); }, 500);
});
});Либо еще один альтернативный скрипт (но нет эффекта при закрытии) — Закрытие элемента по клику за пределами его области (вне элемента)
$(document).ready(function() {
//Появление поиска + !курсор в строке поиска
$('.search-item').click(function() {
$('#sea').show();
$('#sea').addClass('animated fadeInDown');
$('#backfon').show();
$('#backfon').addClass('animated fadeIn');
});
// курсор в строку поиска
$('.search-item').click(function() {
$('#s').focus();
});
});
// Закрытие элемента по клику за пределами его области (вне элемента)
jQuery(function($){
$(document).mouseup(function (e){ // событие клика по веб-документу
var div = $("#sea"); // тут указываем ID элемента
if (!div.is(e.target) // если клик был не по нашему блоку
&& div.has(e.target).length === 0) { // и не по его дочерним элементам
div.hide(); // скрываем его
$('#backfon').hide();
}
});
});CSS
#backfon {
background-color: rgba(0, 0, 0, 0.5);
background-image: url(https://opttour.ru/wp-content/themes/tester/images/bg-pattern.png);
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
display: none;
}
#sea {
top: 50%;
left: 50%;
position: fixed;
z-index: 9999;
opacity: 0;
width: 100px;
height: 25%;
transition: opacity .5s ease;
-webkit-transition: opacity 0.5s ease 0s;
}
#searchform {padding:0; background:none;}
#s {
padding: 10px;
transition: width .3s ease-in-out;
-webkit-transition: width 0.3s ease-in-out 0s;
border: none;
box-sizing: border-box;
position: absolute;
right: 0;
z-index: 98;
}
#pic-sea {
padding: 10px;
border: none;
position: absolute;
right: 0;
background-color: rgb(224, 22, 52);
transition: background-color .3s ease;
-webkit-transition: background-color 0.3s ease 0s;
color: #fff;
z-index: 99;
}
#pic-sea .fa {color: #fff !important;}
#pic-sea:hover {background-color: rgb(153, 8, 21);}
#searchform .fa {padding: 0 !important;}Скрывать поиск
Скрывать поиск, если курсор больше не в поле ввода
$(document).on("focusout","#s",function(){
$('#searchform').slideUp();
});
// или еще вариант
$('td.edit').on("blur","input",function(){
alert("finally bye");
});
