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

检查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;
}

Answer 2

这可能会让您了解如何实现这一目标。

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

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

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

如何创建推/滑菜单

修改

2 个答案: