覆盖菜单（jQuery/CSS）

我目前正在一个为移动和固定设备优化的网站上工作。目前我正在考虑主导航，它应该像一个向下滑动的覆盖层一样工作，就像

但我不知道如何使覆盖效果。我要做的唯一一件事是，当单击菜单按钮时，页面的部分向下滑动。但这并不是真正的叠加效果

菜单的语法：

<div id="navContainer">  
    <div id="topNav">
    <div class="top">
    <div class="heading">
        <div id="logo">LOGO</div>
    </div>
    <a href="#" class="menu">MENU</a> 
</div>

        </div>


    </div>

<div class="drawer">
<nav>
  <ul class="nav nav-tabs nav-stacked">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
  </ul>
</nav>
</div>

标志

菜单的工作原理与此类似，但它应该覆盖内容，而不是向下推。

---

有什么想法吗？

如果你想从正常的布局流程中删除菜单，你可以简单地给它

位置：绝对

.drawer {
    position: absolute;
    width: 100%;
}


我还将内容移到了
.drawer
之外，因为您不希望它和菜单一样被按下。（还调整了一些其他值，但它们基本上是无关的。）
看看我的

我将菜单更改为绝对定位（
position:absolute；
），并将内容div移到横幅之外。
检查此项：

.drawer {
  position: absolute;
  width:100%;
  top:-100px;
}

.content{
 top:90px;
 position:absolute;
 width:100%;
 height:400px;
}

在这里工作：
“固定设备”：）请查看以下网站。Jquery mobile的演示：您是否尝试设置z-index和position:relative…是的，菜单仍在向下滑动内容…不，我几乎完成了网站，现在不想包含框架。@Tom Rudge:他想要的是一个解决方案，而不是需要额外框架的替代方案。