javascript 苹果风格在菜单栏中扩展搜索字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5585282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
apple style expanding search field in menu bar
提问by Daniel
I'm coding a website and I'm trying to replicate the effect on the apple.comwhere when you click to focus the search field in the menu bar, and the search field expands and the rest of the menu bar shrinks to accommodate it.
我正在编写一个网站，我正在尝试在apple.com上复制效果，当您单击以聚焦菜单栏中的搜索字段时，搜索字段会扩大，而菜单栏的其余部分会缩小以适应它.
I've been trying various tricks with jquery kwicks, and also simply expanding a text field using the animate function in jquery but the effect is not the same. If someone could get me on the right track I'd very much appreciate it!
我一直在尝试使用 jquery kwicks 的各种技巧，也只是使用 jquery 中的 animate 函数扩展文本字段，但效果不一样。如果有人能让我走上正轨，我将不胜感激！
Best Daniel
最好的丹尼尔
回答by tjdesign
this can be done by css only no need for javascript or anything...
这可以通过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;
}
voila, thats it ;)
瞧，就是这样;)
回答by peteorpeter
Taking a quick look at how Apple did it, it looks like their big move is this (I could be wrong - I'm rushing):
快速浏览一下 Apple 是如何做到的，看起来他们的重大举措是这样的（我可能错了 - 我很着急）：
#globalheader #globalnav li {
display: table-cell;
width: 100%;
overflow: hidden;
}
#globalheader #globalnav li {
display: table-cell;
width: 100%;
overflow: hidden;
}
This is a pretty unusual CSS display value, and clever on their part, forcing the <li>'s to work like <td>'s. This means that changing the width of one of the "cells" causes the others in the same "row" to adjust how much room they take out.
这是一个非常不寻常的 CSS 显示值，而且他们很聪明，迫使<li>'s 像<td>'s一样工作。这意味着更改“单元格”之一的宽度会导致同一“行”中的其他单元格调整它们占用的空间。
Long live (fake) table-based layout!
万岁（假）基于表的布局！
So, assuming that CSS is possible for you, and I'm not off base with my quick glance at their code, your only task is to animate the width of the search box - the rest should follow suit.
因此，假设 CSS 对您来说是可能的，并且我对他们的代码的快速浏览并没有偏离基础，那么您唯一的任务就是为搜索框的宽度设置动画 - 其余的应该效仿。
回答by sadmicrowave
Not to over simplify things but what if in your css you float:right; this input box and then on focus you animate the box to the appropriate width like so:
不要过度简化事情，但如果在你的 css 中你浮动：对；这个输入框然后在焦点上将框设置为适当的宽度，如下所示：
CSS:
CSS：
#inputtext{
float:right;
width:150px;
}
jQuery:
jQuery：
$("div#inputtext").focus(function(){
$(this).animate({width:'300px'}, 1000);
});
回答by Menu.So
This is a fiddle for this. http://jsfiddle.net/MenuSo/r4xq9gz2/
这是一个小提琴。 http://jsfiddle.net/MenuSo/r4xq9gz2/
HTML:
HTML：
<form id="expanding-form">
<input type="text" id="expanding-input" placeholder="">
<button type="submit">Search</button>
</form>
and CSS:
和 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 would be enough.
CSS就足够了。
