Comment créer une barre de navigation avec un comportement de type "tiroir"

Question

J'essaie de créer une barre de navigation "tiroir" inspirée par ce IKEA: IKEA navbar. En cliquant sur "Rooms" je m'attendais non seulement à apparaître dans la liste des pièces mais aussi à faire glisser le reste du contenu de la page. J'ai utilisé JQuery animate() mais ça ne marche pas. Je suis conscient bien sûr que J'ai besoin de synchroniser d'une manière ou d'une autre le basculement de liste et mon comportement div vert (alias "page content") mais d'abord je dois forcer le div vert à descendre quand je clique sur "Rooms" .Comment faire?

Link to my Pen on Codepen

$(document).ready(function() { 
 
    $(".headers:first").on({ 
 
    click: function() { 
 
     $(".rooms").slideToggle(); 
 
     /* $("#restof").slideToggle();*/ 
 
     /* $("#restof").css("padding-top","300px").slideToggle(); 
 
     */ 
 
     $("#restof").animate({ 
 
     top: "100px" 
 
     }); 
 
    }, 
 
    }); 
 
});

#restof { 
 
    background-color: lightgreen; 
 
    width: 300px; 
 
    height: 100px; 
 
} 
 

 
.rooms { 
 
    list-style: none; 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
.headers { 
 
    list-style: none; 
 
    display: inline-block; 
 
    margin-right: 100px; 
 
    position: relative; 
 
} 
 

 

 
/* 
 
.movedown{ 
 
    margin-top:100px; 
 
} 
 
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li class="headers" id="rooms">Rooms</li> 
 
    <ul class="rooms"> 
 
     <li>BEDROOM</li> 
 
     <li>KITCHEN</li> 
 
     <li>BATHROOM</li> 
 
    </ul> 
 
    <li class="headers" id="products">Products</li> 
 
    </ul> 
 
</nav> 
 
<div id="restof" </div>

Answer 1

Retirez position:absolute pour le sous-menu et mettez le sous-menu à la fin de la navigation dans le code html

$(document).ready(function() { 
 
    $(".headers:first").on({ 
 
    click: function() { 
 
     $(".rooms").slideToggle(); 
 
     /* $("#restof").slideToggle();*/ 
 
     /* $("#restof").css("padding-top","300px").slideToggle(); 
 
     */ 
 
     $("#restof").animate({ 
 
     top: "100px" 
 
     }); 
 
    }, 
 
    }); 
 
});

#restof { 
 
    background-color: lightgreen; 
 
    width: 300px; 
 
    height: 100px; 
 
} 
 

 
.rooms { 
 
    list-style: none; 
 
    display: none; 
 
} 
 

 
.headers { 
 
    list-style: none; 
 
    display: inline-block; 
 
    margin-right: 100px; 
 
    position: relative; 
 
} 
 

 

 
/* 
 
.movedown{ 
 
    margin-top:100px; 
 
} 
 
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li class="headers" id="rooms">Rooms</li> 
 
    <li class="headers" id="products">Products</li> 
 
    </ul> 
 
    <ul class="rooms"> 
 
     <li>BEDROOM</li> 
 
     <li>KITCHEN</li> 
 
     <li>BATHROOM</li> 
 
    </ul> 
 
</nav> 
 
<div id="restof" </div>