叠加菜单（jQuery / CSS）

Question

I'm currently working on a site which is optimized for mobile and stationary devices. currently I'm thinking of the main navigation which should work like an overlay which slides down, just like http://www.teehanlax.com/ .

but i have no idea how to make that overlay effect. only thing I'm getting done, is that the part of the page slides down when the menu button is clicked. but this is no real overlay effect.

syntax of the menu:

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

the menu works much like that http://jsfiddle.net/RFpDJ/1/ but it should overlay the content and not push it down.
Any ideas?

Answer 1

If you want to remove the menu from normal layout flow, you can simply give it position: absolute;

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

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

I also moved the content outside of .drawer because you don't want that pushed down as well as the menu. (Also tweaked some other values, but they are largely irrelevant.)

Answer 2

Look at my solution .

I changed the menu to absolute positioning ( position:absolute; ) and moved the content div outside of the banner.

Answer 3

check this:

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

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

working here: http://jsfiddle.net/RFpDJ/14/