/ Scripts & jquery / Кнопка всплывающего поиска (+ курсор в поиске)

Кнопка всплывающего поиска (+ курсор в поиске)

HIT

06.10.2015

1174

Реализуем скрытый поиск, т.е. форма поиска изначально не показана и вызывается нажатие кнопки.

Форму поиска и подложку вставляем в шапку (например, после открытия 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;}

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Категории в результатах поиска

Категории в результатах поиска

Выведем в результатах поискового запроса категории. Категории будут выведены перед найденными записями. Категории в результатах поиска Вставляем в шаблон вывода результатов поиска (search.php), перед началом цикла if(have_posts()) : В данном Читать далее »

Upgrade WC

Upgrade WC

Очередная серия улучшений (upgrade) плагина WC. Буду добавлять по мере изучения новые решения. Поиск по SKU (артикулу) Из коробки WC не ищет по артикулам (SKU). Но достаточно установить плагин Search Читать далее »

/
Варианты при вводе запроса в поиск

Варианты при вводе запроса в поиск

При вводе поискового запроса удобно чтобы сразу выводились несколько вариантов с ссылками на страницы с искомым словосочетанием. Реализуем это минимальными действиями. Подлючение скрипта и стилей Подключаем все необходимые стили и Читать далее »

/

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

Пока нет комментариев. Будь первым!

Кнопка всплывающего поиска (+ курсор в поиске) Кнопка всплывающего поиска (+ курсор в поиске)
Верстка HTML под рассылку
Рекомендации для васВерстка HTML под рассылкуOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.