如何使用＆＃34;抽屉式外观＆＃34;创建导航栏行为

Question

我正试图创造＆＃34;抽屉式的＆＃34;导航栏受到这个宜家的启发：IKEA navbar。点击＆＃34;房间＆＃34;我希望不仅可以显示房间列表，而且还想放下页面内容的其余部分。我已经使用过JQuery animate（）但是它没有用。我当然知道我需要以某种方式同步列表切换和我的绿色div（又名＆＃34;页面内容＆＃34;）行为，但首先我必须强制绿色div向下移动当我点击＆＃34;房间＆＃34;。如何做到了吗？

Link to my Pen on Codepen

＆＃13;

＆＃13;

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

＆＃13;

#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;
}
*/

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

删除子菜单的position:absolute，并将子菜单放在导航的末尾，用html代码

＆＃13;

＆＃13;

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

＆＃13;

#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;
}
*/

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;