如何创建具有“抽屉外观”行为的导航栏

我正在尝试创建“抽屉外观”导航条，其灵感来自宜家的产品：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>

来源

2017-08-07 Zebra

https://codepen.io/anon/pen/zdNVrp - 先进行主导航，然后进行辅助导航。删除“位置：绝对”，内容将自行移动。完成。 –

您的HTML不正确;孩子'ul'必须放在'li'里面。它不能是另一个'ul'的孩子。你也在'div'上缺少一个'>'，并且在JS –

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

来源

2017-08-07 13:41:51

中有一个额外的'，'非常感谢！ – Zebra

如何创建具有“抽屉外观”行为的导航栏

回答

相关问题