Menu Overlay (jQuery/CSS)

Question

Je travaille actuellement sur un site optimisé pour les appareils mobiles et stationnaires. Actuellement, je pense à la navigation principale qui devrait fonctionner comme une superposition qui glisse vers le bas, tout comme http://www.teehanlax.com/.

mais je n'ai aucune idée de comment faire cet effet de superposition. La seule chose que je suis en train de faire, c'est que la partie de la page glisse quand on clique sur le bouton de menu. mais ce n'est pas un effet de superposition réel.

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

le menu fonctionne beaucoup comme ça http://jsfiddle.net/RFpDJ/1/ mais il devrait recouvrir le contenu et non pas le pousser vers le bas.
Des idées?

Answer 1

Si vous souhaitez supprimer le menu du flux normal de mise en page, vous pouvez simplement donner position: absolute;

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

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

J'ai aussi déplacé le contenu en dehors de .drawer parce que vous ne voulez pas poussé vers le bas ainsi que le menu. (Ajusté également d'autres valeurs, mais elles sont en grande partie non pertinentes.)

Answer 2

Regardez mon solution. J'ai changé le menu pour le positionnement absolu (position:absolute;) et déplacé le contenu div à l'extérieur de la bannière.

Answer 3

vérifier:

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

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

travaillant ici: http://jsfiddle.net/RFpDJ/14/