Question

所以我在一个网站上工作只是为了好玩以学习更多的知识。我现在正在使用Foundation 6。单击该按钮时，该按钮仅显示为小号，并且仍然可以使用，但是offcanvas内容不希望显示。

这是我的代码：

<!DOCTYPE html>
<html class="no-js" lang="hu">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Future Learning</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <!-- Menü kezd -->
    <div class="show-for-medium">
        <ul class="menu menu-vonal-anim">
                <li class="active"><a href="#">Főoldal</a></li>
                <li><a href="#">Rólunk</a></li>
                <li><a href="#">Belépés</a></li>
                <li><a href="#">Regisztráció</a></li>
                <li><a href="#">Kapcsolat</a></li>
        </ul>
    <!-- Menü vég -->
    </div>
    <!-- off canvas menü a kisképernyősöknek-->
    <button type="button" class="button show-for-small-only" data-toggle="offCanvasmenu">Menü</button>
    <div class="grid-x grid-margin-x">
      <div class="cell small-6">
        <div class="off-canvas-wrapper">
          <div class="off-canvas-absolute position-left" id="offCanvasmenu" data-off-canvas>
                <ul class="menu menu-vonal-anim">
                        <li class="active"><a href="#">Főoldal</a></li>
                        <li><a href="#">Rólunk</a></li>
                        <li><a href="#">Belépés</a></li>
                        <li><a href="#">Regisztráció</a></li>
                        <li><a href="#">Kapcsolat</a></li>
                </ul>
                <div class="off-canvas-content" data-off-canvas-content></div>
          </div>
        </div>
      </div>
    </div>
    <!-- off canvas menü vége-->

    <!-- Oldal tartalom -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.min.js"></script>
    <script> 
    $(document).foundation(); </script>
</body>
</html>

Answer 1

您的问题在于：

<div class="off-canvas-absolute position-left" id="offCanvasmenu" data-off-canvas>

从“画布”类中删除“绝对”，使其变为：

<div class="off-canvas position-left" id="offCanvasmenu" data-off-canvas>

Foundation 6 offcanvas菜单不起作用/触发

1 个答案: