javascript - 如何创建推/滑菜单

Question

我正在尝试在我的网站上创建一个推送/滑出菜单系统，就像 www.squarespace.com 一样有，但是我不知道该怎么做。

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

我用于导航的 site.region 文件是:

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

从 navigation.block 中提取的信息是这样的:

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

那么菜单的 .less 样式是:

.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

Answer 1

检查这个fiddle .

这应该让您了解如何实现要求。

$(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;
}