Fatal编程技术网

Zurb foundation 帆布容器基础6.4.3

zurb-foundation

Zurb foundation 帆布容器基础6.4.3,zurb-foundation,zurb-foundation-6,off-canvas-menu,Zurb Foundation,Zurb Foundation 6,Off Canvas Menu,我遵循了非画布使用的方法，但根本不起作用。当我试图在论坛上创建帖子时，F6论坛返回了403： 以下是我尝试的HTML代码： <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta na

我遵循了非画布使用的方法，但根本不起作用。当我试图在论坛上创建帖子时，F6论坛返回了
403
：

以下是我尝试的HTML代码：

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="app.css"/>

  </head>
  <body>

    <div class="off-canvas-wrapper">
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
        <!-- Close button -->
        <button class="close-button" aria-label="Close menu" type="button" data-close>
          <span aria-hidden="true">&times;</span>
        </button>

            <!-- Menu -->
        <ul class="vertical menu">
          <li><a href="#">Foundation</a></li>
          <li><a href="#">Dot</a></li>
          <li><a href="#">ZURB</a></li>
          <li><a href="#">Com</a></li>
          <li><a href="#">Slash</a></li>
          <li><a href="#">Sites</a></li>
        </ul>

      </div>
      <div class="off-canvas-content" data-off-canvas-content>
        <!-- Your page content lives here -->
        Welcome !
      </div>
    </div>

    <!-- Compressed JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>


基础起动器模板
&时代；

    

  • 

  • 

  • 

  • 

  • 

  • 


欢迎
$（document.foundation（）；
只显示“欢迎”字样，没有画外音。我在这里做错了什么？谢谢。

你确定那里什么都没有吗

看起来你只是缺少了一个点击处理程序来打开你的非画布内容-根据文档

尝试添加：

<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>

打开菜单
在你的范围内

<div class="off-canvas-content" data-off-canvas-content>
是的，在添加按钮后，它起作用了。但是1->“关闭”按钮的作用是什么（它也不起作用，只是显示），2->我相信画布将始终显示，并且可以通过菜单按钮折叠或打开。不，默认情况下，非画布将不显示（它将隐藏在主画布之外）。您可以更改刚刚添加的按钮，使其具有菜单图标，以便用户单击该按钮打开菜单。如果您希望在默认情况下将其打开，则需要使用脚本$（'#元素'）。foundation（'打开'、事件、触发器）；这样做。至于“关闭”按钮不起作用，我不完全确定，文档建议这样做可以关闭它，但是单击/点击画布上的任意位置会自动关闭画布外的内容。