Question

好吧，我按照页面上的所有说明进行操作，或者我想，但我还是不能让Off Canvas在我的基金会工作？

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<script>
  $(document).foundation();
</script>

根据网站的说法，这就是我的指示。 http://foundation.zurb.com/docs/components/offcanvas.html 还是这样我想？还

        <div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title">Foundation</h1>
      </section>

      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>
    </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Hari Seldon</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <section class="main-section">
      <!-- content goes here -->
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>

这是按照指示完成的吗？我最终得到的是菜单显示，但是当我点击关闭画布的按钮弹出时，它不会弹出？

EDIT 好吧，所以我尝试了你的建议，它确实弹出。 BUUUT而不是从侧面弹出，它弹出，把所有东西推倒，然后制作这个小小的滚动条？

好吧，这就是输入你的代码时的样子。然后... One of my issues

当我点击它时，发生了这种情况......

Other issue

看到所有的空白区域？欢迎来到基金会的标题是向下滚动一个鼠标。看到弹出菜单旁边的小滚动条？ = /

Answer 1

好的，我明白了。移动$（document）.foundation（）;在body标签上加载。或者至少把它放在身体标签内。您可以将.js引用保留在head标记内。我这样做了：

<html>
<head>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <link rel="stylesheet" href="css/foundation.css">
</head>
<body onload="$(document).foundation();">
    <div class="off-canvas-wrap" data-offcanvas>
        <div class="inner-wrap">
            <nav class="tab-bar">
                <section class="left-small">
                    <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
                </section>

                <section class="middle tab-bar-section">
                    <h1 class="title">Foundation</h1>
                </section>

                <section class="right-small">
                    <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
                </section>
            </nav>

            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Foundation</label></li>
                    <li><a href="#">The Psychohistorians</a></li>
                    <li><a href="#">...</a></li>
                </ul>
            </aside>

            <aside class="right-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Users</label></li>
                    <li><a href="#">Hari Seldon</a></li>
                    <li><a href="#">...</a></li>
                </ul>
            </aside>

            <section class="main-section">
                <!-- content goes here -->
            </section>

            <a class="exit-off-canvas"></a>

        </div>
    </div>
</body>

我希望它有效！

PD：我真的很沮丧，我有2条评论试图纠正我的错误，并且零答案试图解决问题。

Answer 2

我建议将以下所有代码复制并粘贴到一个全新的html页面中并进行检查。然后你可以建立它或者弄清楚旧代码的问题。

使确定所有链接文件（css和js）都已加载。您可能需要更改示例中的路径。确保他们被访问是绝对必要的。使用Web浏览器检查器查看是否收到任何404（未找到）错误。

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>



    <div class="off-canvas-wrap" data-offcanvas>
      <div class="inner-wrap">
        <nav class="tab-bar">
          <section class="left-small">
            <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
          </section>

          <section class="middle tab-bar-section">
            <h1 class="title">Foundation</h1>
          </section>

          <section class="right-small">
            <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
          </section>
        </nav>

        <aside class="left-off-canvas-menu">
          <ul class="off-canvas-list">
            <li><label>Foundation</label></li>
            <li><a href="#">The Psychohistorians</a></li>
            <li><a href="#">...</a></li>
          </ul>
        </aside>

        <aside class="right-off-canvas-menu">
          <ul class="off-canvas-list">
            <li><label>Users</label></li>
            <li><a href="#">Hari Seldon</a></li>
            <li><a href="#">...</a></li>
          </ul>
        </aside>    

        <a class="exit-off-canvas"></a>



        <div class="row">
          <div class="large-12 columns">
            <h1>Welcome to Foundation</h1>
          </div>
        </div>

        <div class="row">
          <div class="large-12 columns">
            <div class="panel">
              <h3>We&rsquo;re stoked you want to try Foundation! </h3>
              <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
              <p>Once you've exhausted the fun in this document, you should check out:</p>
              <div class="row">
                <div class="large-4 medium-4 columns">
              <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
            </div>
                <div class="large-4 medium-4 columns">
                  <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
                </div>
                <div class="large-4 medium-4 columns">
                  <p><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</p>
                </div>
              </div>
            </div>
          </div>
        </div>


    </div>
    </div>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>    

  </body>
</html>

Answer 3

只需添加此CSS代码：

.inner-wrap {
    min-height: 100vh;
}

帆布基金会没有工作？

3 个答案: