Как лучше реализовать поле поиска на сайте?

Question

[Никита Souvel]

В общем у меня есть и свои идеи, но хотелось бы узнать у вас ваши предложения, как это лучше сделать.
Суть такова: пользователь наводит и нажимает 1 раз: выскакивает поле для поиска, после если он нажимает ещё раз на лупу, то ищет, если же в любое место экрана, то поле закрывается.

work.souvel.ru/alpha/_html

По скольку на js компресс, то скину код, который сейчас отвечает за это поле:

var FormWrap = $('#main-search');
	$('.search-submit').click(function() {
		if ( FormWrap.hasClass('active') == false ) {
			$(FormWrap).addClass('active');
			$('#s').animate({
				width: "180px",
			}, 1);
			$('#s').focus();
			return false;
		}
	});
	$('#s').focusout(function() {
		$(FormWrap).removeClass('active');
		$('#s').animate({
				width: "0",
			}, 1);
	});

Answer 1

[Константин Громов]

Упрощённый пример jsfiddle.net/xe38nwa0:

• Убран div вокруг submit'а. Он не имел смысла, и теперь вся кнопка кликабельна, а не только изображение внутри.
  
• Вся анимация происходит с помощью css.
  
• Javascript реализован без focusin/focusout. С ними бы получилось немного лучше, но я так и не нашёл информации о совместимости свойства event.relatedTarget у этих событий, без которого идей не было.
  

Comments

[Константин Громов]

jsfiddle.net/yy0ppokv
Исправленный вариант. В прошлом был небольшой баг в css.