苹果风格在菜单栏中扩展搜索字段

Question

我正在编写一个网站，并尝试复制 apple.com 上的效果，当您单击时将搜索字段聚焦在菜单栏中，搜索字段会扩展，菜单栏的其余部分会缩小以容纳它。

我一直在尝试使用 jquery kwicks 的各种技巧，并且还简单地使用 jquery 中的 animate 函数扩展文本字段，但效果并不相同。如果有人能让我走上正轨，我将非常感激！

最好的 丹尼尔

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

快速浏览一下苹果是如何做到的，看起来他们的大动作是这样的（我可能是错的 - 我很着急）：

#globalheader #globalnav li {
显示：表格单元格；
宽度：100%；
溢出：隐藏；
这

是一个非常不寻常的 CSS 显示值，而且很聪明，迫使

像 ' 那样工作。 s。这意味着更改其中一个“单元格”的宽度会导致同一“行”中的其他单元格调整它们占用的空间量。

基于（假）表格的布局万岁！

因此，假设 CSS 对您来说是可能的，并且我快速浏览了一下他们的代码并没有偏离基础，您唯一的任务就是为宽度设置动画搜索框的 - 其余部分也应效仿。

Answer 3

不要过度简化事情，但是如果在你的 css 中你 float:right; 该怎么办？这个输入框，然后焦点将框动画到适当的宽度，如下所示：

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 就足够了。