1
如何創建一個像android網站一樣的搜索框?當我點擊搜索圖標時,菜單項淡出,搜索框展開。 enter image description here如何創建一個像android.com網站的搜索框?
Before search and after clicking the search icon
如何創建一個像android網站一樣的搜索框?當我點擊搜索圖標時,菜單項淡出,搜索框展開。 enter image description here如何創建一個像android.com網站的搜索框?
Before search and after clicking the search icon
我想你想的財產以後這樣嗎? 希望這是使用全
$(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>
也在這裏添加您的代碼 – Gomzy