Яблочный стиль, расширяющий поле поиска в строке меню

Question

Я кодирую веб-сайт и пытаюсь воспроизвести эффект на apple.com , где при нажатии кнопки фокусируется поле поиска в строке меню, и поле поиска расширяется, и остальная часть строки меню сжимается, чтобы вместить его.

Я пробовал различные приемы с помощью jquery kwicks, а также просто расширял текстовое поле с помощью функции animate в jquery, но эффект не тот же. Если бы кто-то смог направить меня в нужное русло, я был бы очень признателен!

Лучший Daniel

Answer 1

это может быть сделано css только без необходимости JavaScript или чего-либо еще ...

#search input {
 width: 100px;
 -moz-transition: width 0.5s ease-out;
 -webkit-transition: width 0.5s ease-out;
 transition: width 0.5s ease-out;
}
#search input:focus {
 width: 200px;
 -moz-transition: width 0.5s ease-out;
 -webkit-transition: width 0.5s ease-out;
 transition: width 0.5s ease-out;
}

вуаля, вот оно;)

Answer 2

Беглый взгляд на то, как Apple это сделала, похоже, что их большой шаг заключается в следующем (я могу ошибаться - я тороплюсь):

#globalheader #globalnav li { display: table-cell; width: 100%; overflow: hidden; }

Это довольно необычное значение отображения CSS, и со своей стороны оно умное, заставляя <li> работать как <td>. Это означает, что изменение ширины одной из «ячеек» заставляет других в том же «ряду» регулировать, сколько места они занимают.

Да здравствует (подделка) табличный макет!

Итак, предполагая, что CSS возможен для вас, и я не уклоняюсь от базового взгляда на их код, ваша единственная задача - анимировать ширину поля поиска - остальное должно последовать его примеру.

Answer 3

Не слишком упрощать вещи, но что, если в вашем CSS вы плаваете: правильно;В этом поле ввода и затем в фокусе вы анимируете поле на соответствующую ширину следующим образом:

CSS:

#inputtext{
    float:right;
    width:150px;
}

jQuery:

$("div#inputtext").focus(function(){
   $(this).animate({width:'300px'}, 1000);
});

Answer 4

Это скрипка для этого. http://jsfiddle.net/MenuSo/r4xq9gz2/

HTML:

   <form id="expanding-form">
        <input type="text" id="expanding-input" placeholder="">
        <button type="submit">Search</button>
    </form>

и CSS:

#expanding-form input{
    width: 30px;
    height: 30px;
    -o-transition: width .5s ease;
    -ms-transition: width .5s ease;
    -moz-transition: width 0.5s ease-out;
    -webkit-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
}
#expanding-form input:focus{
    width: 200px;
}

CSS будет достаточно.