html - 绝对定位的响应式导航菜单幻灯片体

Question

我的基本 HTML 结构是这样的：

身体

-header
-div
--searchform
-/div
-nav
-/header    
-content
-footer

在较小的屏幕上，我绝对定位我的搜索表单和导航并将其带到页面顶部，但最初将其隐藏。在点击我的菜单或搜索按钮时，搜索表单和导航应该显示在页面顶部，但不会与我的页面内容重叠。它们应该像页面的其余部分一样平滑地动画下来。

我尝试了很多东西，但我无法让它工作，因为它们是标题的一部分。