擴大搜索框的建議

我一直在看每個教程和樣本，但無法得到這個權利。我需要在搜索框上重新創建一個動畫，以便它展開以便在懸停或點擊時獲得菜單的全部寬度。完全像firebase的標題website。擴大搜索框的建議

$(".search").click(function() { 
    $(".search").css('width': '100%'); 
});

來源

2017-10-18 Super Man

你可以用純CSS做到這一點。

只需在搜索框:focus和:hover上設置所需的寬度。對於動畫，我已申請transition: all 1s ease-in-out和!important，因爲.ui.input input已經有轉場屬性。

.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>

來源

2017-10-18 17:24:44 Nisarg

感謝Nisarg。驚人。還有一件事。我用你的代碼https://jsfiddle.net/n3drq3nr/4/更新了我的小提琴，它沒有展開寬度從400px到100％的變化，而且動畫也不起作用。但總體來說，這有很大幫助。再次感謝 –

@SuperMan看着你的小提琴，看起來很奇怪，寬度100％不起作用。我的猜測是，其中一個父元素可能會強制它的寬度。我可能會嘗試在這種情況下使用'calc'來獲取元素的全寬。 – Nisarg

@SuperMan在這個小提琴中，我將寬度設置爲等於全寬減去扳手圖標的寬度。您可以調整它，使其按照您想要的方式工作：https://jsfiddle.net/n3drq3nr/5/ – Nisarg

你可以用純CSS做到這一點，沒有JS需要。考慮css transitions

#search{ 
 
    width:200px; 
 
} 
 

 
#search:focus, #search:hover{ 
 
    width:100%; 
 
    transition: width 2s; 
 
}

<input id="search"/>

來源

2017-10-18 17:20:24 Dale

擴大搜索框的建議

回答

相關問題