点击后搜索栏

Question

我正在尝试在导航菜单旁边放置一个搜索按钮，单击该按钮会弹出导航菜单下方的搜索栏。基本上会是类似下面的图片：

正常状态

点击后

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

Answer 1

试试这个：

<强> JS：

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

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

Answer 2

你只能使用CSS。

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

---

总结一下，在菜单中你将添加以下css：

position: relative;

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

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

100px是搜索栏的高度。