jquery - クリック後の検索バー

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検索バーの高さはどこですか。