javascript - Foundation off canvas 行不通？-6ren

javascript - Foundation off canvas 行不通？

转载作者：行者123 更新时间：2023-11-30 05:31:40

好吧，我按照页面上的所有说明操作，或者我是这么想的，但我仍然无法让 Off Canvas 在我的 Foundation 中工作？

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

这一切都按照指示完成了吗？我最终得到的是菜单显示，但是当我点击按钮弹出 Canvas 时，它没有弹出？

编辑好吧，所以我尝试了你的建议，它确实流行了。 BUUUT 不是从侧面弹出，而是弹出，将所有内容向下推，并形成了这个小滚动条？

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

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

Other issue

看到那些空白了吗？欢迎来到 Foundation 的标题是一个鼠标向下滚动。看到弹出菜单旁边的小滚动条了吗？ =/

最佳答案

好的，我知道了。移动 $(document).foundation();在 body 标签中加载。或者至少把它放在 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>