点击后的搜索栏

Question

我试图在导航菜单旁边放置一个搜索按钮，点击它时会弹出导航菜单下方的搜索栏。基本上会像下面的图片：

正常状态

点击后

是否有任何教程，在那里，可以帮助我实现这一目标？ 谢谢！

Answer 1

你可以只用CSS来做。

我个人会在菜单上使用position: relative，然后在搜索栏上使用position: absolute。将right: 10px和bottom: -100px（将像素更改为搜索栏的高度）。搜索栏HTML应位于菜单内。

---

概括起来，到菜单中，您将添加以下的CSS：

position: relative; 

要搜索栏，您将添加以下的CSS：

position: absolute; 
right: 10px; 
bottom: -100px; 

哪里100px是高度的搜索栏。

Answer 2

试试这个：

JS：

$(document).ready(function(){ 
    $ ("#searchForm"). hide(); 
    $("#searchButton").click(function(){ 
     $("#searchForm").show(); 
    }); 
}); 

HTML： <form id="searchForm">myForm</form> <input type="submit" id="searchButton"/>