扩大搜索框的建议

我一直在看每个教程和样本，但无法得到这个权利。我需要在搜索框上重新创建一个动画，以便它展开以便在悬停或点击时获得菜单的全部宽度。完全像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

扩大搜索框的建议

回答

相关问题