1

我目前正在开发一个针对移动和固定设备进行了优化的网站。目前我正在考虑主导航，它应该像一个向下滑动的叠加层一样工作，就像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/非常相似，但它应该覆盖内容而不是向下推。
有任何想法吗？

4

3 回答 3

2

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

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

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

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

于 2013-08-12T11:00:17.840 回答
0

检查这个：

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

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

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

于 2013-08-12T11:13:08.243 回答
0

看看我的解决方案。

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

于 2013-08-12T11:02:51.823 回答