如何创建推/滑动菜单

我想在我的网站上创建一个Push/slide out菜单系统，就像www.squarespace.com一样，但是我不知道怎么做。

我的网站是一个Squarespace网站，它使用html, json和更少(你也可以添加。js文件):splitblog.squarespace.com/

我的网站。导航区域文件为:

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

从导航中提取信息。块，它是:

<nav id="main-navigation" class="main-navigation" data-content-field="navigation-mainNav">
  <ul>
    {.repeated section items}
        <li class="{.section active} active-link{.end}{.if folderActive} active-folder{.end}">
          {.folder?}
            <!--FOLDER-->
              <a href="{collection.fullUrl}">{collection.navigationTitle}</a>
              <ul>
                {.repeated section items}
                  <!--COLLECTION IN A FOLDER-->
                  {.collection?}
                    <li class="{.section active} active-link{.end}">
                      <a href="{collection.fullUrl}">
                        {collection.navigationTitle}
                      </a>
                    </li>
                  {.end}
                  <!--EXTERNAL LINK IN A FOLDER-->
                  {.section externalLink}
                    <li>
                      <a href="{url}"{.section newWindow} target="_blank"{.end}>
                        {title}
                      </a>
                    </li>
                  {.end}
                {.end}
              </ul>
          {.or}
            <!--COLLECTION-->
            {.section collection}
              <a href="{fullUrl}">{navigationTitle}</a>
            {.end}
            <!--EXTERNAL LINK-->
            {.section externalLink}
              <a href="{url}"{.section newWindow} target="_blank"{.end}>
                {title}
              </a>
            {.end}
          {.end}
        </li>
    {.end}
  </ul>
</nav>

.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;
      }
    }
  }
}

任何帮助都会很感激。请随意提供css和js解决方案。谢谢!

编辑

下面是我想实现的一个例子:codepen