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

快速了解一下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就足够了。

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

4 个答案: