jquery - 如何创建具有 "drawer-looking"行为的导航栏

Question

我正在尝试创建受宜家启发的“抽屉式”导航栏:IKEA navbar .单击“房间”时，我不仅希望出现房间列表，而且还想向下滑动页面的其余内容。我使用了 JQuery animate() 但它不起作用。我当然知道我需要以某种方式同步列表切换和我的绿色 div(又名“页面内容”)行为，但首先我必须在单击“房间”时强制绿色 div 向下移动。如何做？

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

去掉子菜单的position:absolute，把子菜单放在html代码中的nav末尾

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