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

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

06.10.2015

880

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

Форму поиска и подложку вставляем в шапку (например, после открытия 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()) : <?php $search_term Читать далее »

Поиск по категориям

Поиск по категориям

Стандартный поиск WordPress ищет по всему сайту. Добавим в поисковую форму выбор категории сужающий сектор поиска. Поиск по категориям WordPress Для поиска по категория WP в строку запроса необходимо добавить Читать далее »

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

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

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