Javascript 如何创建推送/滑动菜单

我正试图在我的网站上创建一个推/滑出菜单系统，就像how has一样，但是我不知道怎么做

我的站点是一个Squarespace站点，它使用html、json和更少的内容（您也可以使用ad.js文件）：

用于导航的My site.region文件是：

<squarespace:navigation navigationId="mainNav" template="navigation" />

任何帮助都将不胜感激。请随意提供css和js解决方案。谢谢

编辑

---

下面是一个我想要实现的示例：

检查这个

这将让您了解如何实现需求

$(document).on("click","#button", function(){

    $('#div2').animate({ width:"20%" }, 200);
    $('#div1').animate({width:"80%" }, 200);

});

$(document).on("click","#close", function(){

    $('#div2').animate({visibility:"hidden" , width:"0%" }, 200); 
    $('#div1').animate({width:"100%" }, 200);

});


#div1
{
    height:100%;
    width:100%;
    float:left;
    position:fixed;
}
#div2
{
    height:100%;
    width:0%;
    float:right;

}

#button
{
    margin-top:20px;
    margin-right:20px;
    float:right;
}

---

这可能会让您了解如何实现这一点

基金会在其框架中有一个Offab帆Script菜单，您可以查看并查看它们是如何创建的。

---

我过去曾使用过pushy，效果很好：。至少它会让你知道如何解决这个问题。。这是一个我想要实现的示例：所以你想要一个可滚动的面板和一个不可滚动的面板？我想把它添加到模板的右侧。我希望汉堡图标位于右上角。我希望它和squarespace.com的菜单系统一样。是的，如果菜单中有很多项目，我希望菜单可以滚动。这不是我想做的。对不起，我不清楚。我正在尝试创建与www.squarespace.com相同的菜单/导航系统-单击菜单图标，菜单从右侧滑出。更新了小提琴。。将虚拟数据替换为需求元素SHMM。。。我尝试实现代码，但是js似乎没有激活菜单。。你介意看一下吗？

.main-navigation {
  ul {  
    padding-left: 0;
    li {
      display: inline-block;
      ul {
        display: none;
      }
      &:not(:last-child) {
        margin-right: .5em;
      }
      &:hover > ul {
        display: inline-block;
      }
      &.active-link > a {
        color: salmon;
      }
      &.active-folder > a {
        color: orange;
      }
    }
  }
}

$(document).on("click","#button", function(){

    $('#div2').animate({ width:"20%" }, 200);
    $('#div1').animate({width:"80%" }, 200);

});

$(document).on("click","#close", function(){

    $('#div2').animate({visibility:"hidden" , width:"0%" }, 200); 
    $('#div1').animate({width:"100%" }, 200);

});


#div1
{
    height:100%;
    width:100%;
    float:left;
    position:fixed;
}
#div2
{
    height:100%;
    width:0%;
    float:right;

}

#button
{
    margin-top:20px;
    margin-right:20px;
    float:right;
}