[ПОМОЩЬ] Выезжающий поиск Jquery 1.11

[ultra]

всем привет
поскольку в js не шарю, прошу помочь - сделать выезжающий поиск
заготовочка Для просмотра ссылки Войди или Зарегистрируйся
необходимо, чтобы при нажатии на иконочку search выезжала форма поиска ровно до блока№1 накрывая собой все по дороге
после выезжания формы, иконка должна принимать submit, клик в любом месте отличном от формы и иконки - сворачивает форму в первоначальное состояние
было бы замечательно, если в левой части формы (перед формой) образовывался крестик закрытия формы
хедер фиксированный, макет резиновый, jquery 1.11 не брезгую
если информации не хватает, отвечу на возникающие вопросы

примеры с недостающим функционалом
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

буду не против отблагодарить услугами моей темы - Для просмотра ссылки Войди или Зарегистрируйся
и/или одарить кланяющимися смайликами

 

[mdss]

Для просмотра ссылки Войди или Зарегистрируйся

Если в текстовое поле ничего не введено, то клик по кнопке поиска (как и по другому месту) просто свернет обратно все это дело. Если же что-то введено, то соответственно отправится форма

 

[horuz]

в мозилле, есть написать в вашем примере текст и кликнуть потом на пустое место, то форма просто скрывается. если ее снова открыть и кликнуть по кнопке. то форма не уходит.
работает только если ввести и потом сразу на кнопку GO нажать.

 

[mdss]

в мозилле, есть написать в вашем примере текст и кликнуть потом на пустое место, то форма просто скрывается. если ее снова открыть и кликнуть по кнопке. то форма не уходит.
работает только если ввести и потом сразу на кнопку GO нажать.

изменяем следующие строки

searchBox.removeClass('searchbox-open');
                    inputBox.focusout();
                    isOpen = false;
                }

на такое

searchBox.removeClass('searchbox-open');
                    inputBox.focusout();
                  inputBox.val('');
                    isOpen = false;
                }

Теперь если ввел в текстовое поле и свернул его, то оно очистится от введенных данных.

 

[ultra]

меня больше интересует, как развернуть эту форму, до определенного элемента на странице

 

[mdss]

меня больше интересует, как развернуть эту форму, до определенного элемента на странице

просто верстка пошла ужо.
Вот тебе рабочий пример
Для просмотра ссылки Войди или Зарегистрируйся

1) Классу .navigation добавлено позиционирование и z-index
2) Поиск обернут в слой, которому задано абсолютное позиционирование на всю ширину блока header, но со сдвигом слева на ширину логотипа, т.е. на 100 пикселей (left:100px
3) Классу searchbox-open добавлен z-index, чтобы при открытии поиска он перекрывал блок навигации
Enjoy