如何创建推/滑菜单

Question

我正在尝试在网站上创建一个“推入/滑出”菜单系统，如www.squarespace.com那样 ，但是我不知道该怎么做。

我的网站是Squarespace网站，它使用html，json和更少的内容（您也可以广告.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

检查这个小提琴 。

这应该使您对如何实现要求有所了解。

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

Answer 2

这可能会让您了解如何实现此目的。

http://thecodeplayer.com/walkthrough/off-canvas-menu-animated-links

在他们的框架中，基金会也有一个offcanvas菜单，您可以查看并查看他们如何创建此菜单。

http://foundation.zurb.com/docs/components/offcanvas.html