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

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

HIT

06.10.2015

1147

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

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

Тэги:

Поделится информацией с друзьями

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

Поиск по сайту

Поиск по сайту — важнейший инструмент позволяющий находить на сайте любую информацию. Relevanssi Relevanssi — A Better Search — плагин расширяющий функционал поиска Стандартная форма поиска wordpress CSS Формы поиска Читать далее »

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

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

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

Upgrade WC

Upgrade WC

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

/

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

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

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