如何创建具有“抽屉外观”行为的导航栏
问题描述：
我正在尝试创建“抽屉外观”导航条，其灵感来自宜家的产品：IKEA navbar。当点击“房间”时，我预计不仅会出现房间列表，而且还想要滑动其余的页面内容。我使用过JQuery animate（），但它不起作用。我当然知道我需要同步列表切换和我的绿色div（又名“页面内容”）行为，但首先我必须强制绿色div下移，当我点击“房间”。如何做到这一点？如何创建具有“抽屉外观”行为的导航栏
$(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>
答
删除position:absolute的子菜单，并把子菜单的导航在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>+0
中有一个额外的'，'非常感谢！ – Zebra
https://codepen.io/anon/pen/zdNVrp - 先进行主导航，然后进行辅助导航。删除“位置：绝对”，内容将自行移动。完成。 –
您的HTML不正确;孩子'ul'必须放在'li'里面。它不能是另一个'ul'的孩子。你也在'div'上缺少一个'>'，并且在JS –