Question

我目前正在开发针对移动和固定设备进行优化的网站。目前我正在考虑主导航，它应该像覆盖一样向下滑动，就像http://www.teehanlax.com/一样。

但我不知道如何制作叠加效果。我唯一要做的就是点击菜单按钮时页面的一部分向下滑动。但这并不是真正的叠加效应。

菜单语法：

<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>

菜单与http://jsfiddle.net/RFpDJ/1/非常相似，但它应该覆盖内容而不是将其推下来有什么想法吗？

Answer 1

如果要从普通布局流程中删除菜单，只需将其设为position: absolute;

即可

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

http://jsfiddle.net/RFpDJ/12/

我还将内容移到.drawer之外，因为您不希望按下菜单。（还调整了一些其他值，但它们在很大程度上无关紧要。）

Answer 2

查看我的solution。

我将菜单更改为绝对定位（position:absolute;）并将内容div移到横幅之外。

Answer 3

检查一下：

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

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

在这里工作：http://jsfiddle.net/RFpDJ/14/

叠加菜单（jQuery / CSS）

3 个答案: