如何创建一个像android.com网站的搜索框？

Question

如何创建一个像android网站一样的搜索框？当我点击搜索图标时，菜单项淡出，搜索框展开。 enter image description here

Before search and after clicking the search icon

Answer 1

我想你想的财产以后这样吗？ 希望这是使用全

$(document).ready(function(){ 
 
\t \t $("#im").click(function(){ 
 
\t \t \t $("#menu").fadeOut(); 
 
\t \t \t $("#box1").fadeIn(); 
 
\t \t }); 
 
\t });

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 

 
.active { 
 
    background-color: #4CAF50; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
\t <div id="menu"> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
    <li><img id="im" src="a.png" height="50px" width="50px"></li> 
 
    </div> 
 
    <li id="box1" style='display: none;'> 
 
    <div class="box"> 
 
    <div class="container-1"> 
 
     <span class="icon"><i class="fa fa-search"></i></span> 
 
     <input type="search" id="search" placeholder="Search..." /> 
 
    </div> 
 
</div> 
 
</li> 
 
</ul>