如何创建像android.com网站这样的搜索框？

Question

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

Before search and after clicking the search icon

Answer 1

我想你想要这样的事情？ 希望这是完全使用

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
	<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>

＆＃13;

＆＃13;

＆＃13;