私はすべてのチュートリアルとサンプルを見てきましたが、この権利を得ることはできませんでした。私は、検索ボックス上でアニメーションを再作成する必要があります。そのようにして、ホバリングまたはクリックされたメニューの全幅を取るように拡張します。 firebase websiteのヘッダーとまったく同じです。提案付きの拡張検索ボックス
あなたは何のJSは必要ありません、純粋なCSSでこれを行うことができますjsfiddle
$(".search").click(function() {
$(".search").css('width': '100%');
});
に見てあなたは純粋なCSSでこれを行うことができます。
検索ボックスに必要な幅を:focusと:hoverに設定するだけです。アニメーションの場合、に既に遷移プロパティがあるので、を!importantに適用しました。
.prompt {
transition: all 1s ease-in-out !important;
width: 180px;
}
.prompt:focus,
.prompt:hover {
width: calc(100vw - 45px);
}<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script>
<div class="ui top attached menu">
<div class="ui dropdown icon item">
<i class="wrench icon"></i>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">New</span>
<div class="menu">
<div class="item">Document</div>
<div class="item">Image</div>
</div>
</div>
<div class="item">
Open...
</div>
<div class="item">
Save...
</div>
<div class="item">Edit Permissions</div>
<div class="divider"></div>
<div class="header">
Export
</div>
<div class="item">
Share...
</div>
</div>
</div>
<div class="right menu">
<div class="ui right aligned category search item">
<div class="ui transparent icon input">
<input class="prompt" type="text" placeholder="Search animals...">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</div>
<div class="ui bottom attached segment">
<p></p>
</div>を開始します。 css transitions
#search{
width:200px;
}
#search:focus, #search:hover{
width:100%;
transition: width 2s;
}<input id="search"/>
おかげNisarg。素晴らしい。もう一つ。あなたのコードhttps://jsfiddle.net/n3drq3nr/4/で自分のフィドルを更新しましたが、400pxから100％への幅の変更やアニメーションの動作が拡張されていません。しかし全体的にこれは多くの助けになります。もう一度ありがとう –
@SuperManあなたのフィドルを見て、それは確かに幅100％が動作していない奇妙に思われる。私の推測では、親要素の1つがその上に幅を強制している可能性があります。私はおそらくこのような場合に 'calc'を使って要素の全幅を取得しようとします。 – Nisarg
@SuperManこのフィドルでは、全幅からレンチアイコンの幅を差し引いた幅に設定しました。あなたはそれがあなたが望むように動作するようにそれを調整することができます：https://jsfiddle.net/n3drq3nr/5/ – Nisarg