Foundation 6 offcanvas меню не работает / запускает - PullRequest
Новая
       18

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

0 голосов
/ 30 октября 2018

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

0 голосов
/ 23 ноября 2018

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

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

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

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