Foundation 6 offcanvas меню не работает / запускает

Так что я работаю над сайтом просто для удовольствия, чтобы узнать еще кое-что. Я работаю с Фондом 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>
Источник

1 ответ

Ваша проблема с:

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

Удалите "absolute" из класса вне холста, чтобы он стал:

<div class="off-canvas position-left" id="offCanvasmenu" data-off-canvas>
Источник
Другие вопросы по тегам