javascript – 始终显示Foundation 5 off-canvas菜单

2019年7月20日 120次阅读

我很难在Foundation 5中使用我的非画布菜单来打开和关闭,或者至少不会总是出现在画布上.下面是当前网站的图片.

As shown, the offcanvas is very much on canvas

这是我到目前为止运行的HTML.内容不包含在单独的YAML文件中,但它应该是不必要的.

<!DOCTYPE html>
<html>
  <head>
    <link rel="icon" type="image/png" href="/assets/img/logo/sjpminilogo.png" />

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>{{ page.title }} | Paly SJP</title>
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="/assets/css/syntax.css">
    <link rel="stylesheet" href="/assets/css/main.css">
    <link rel="stylesheet" href="/assets/foundation/css/foundation.css">
    <link rel="stylesheet" href="/assets/foundation/css/normalize.css">
    <link rel="stylesheet" href="/assets/css/custom.css">

    <script type="text/javascript" src="/assets/foundation/js/custom.modernizr.js"></script>    

    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">    

  </head>
  <body>

    <div class="site">

      <div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">

      <div class="header">

        <!-- Top Bar -->
        <nav class="top-bar">
          <ul class="title-area">
        <!-- Title Area -->
        <li class="name">
          <h1><a href="/">Paly SJP</a></h1>
        </li>
          </ul>

              <!-- All tabs on right side  -->
              <section class="top-bar-section">
        <ul class="right">

          <li class="name">
            <a href="/about.html">ABOUT US</a>
          </li>

          <li class="name">
            <a href="/calendar.html">CALENDAR</a>
          </li>

          <li class="has-dropdown not-click"><a href="#">COHORTS</a>
            <ul class="dropdown">
              <li><a href="/cohorts/one/about.html">COHORT 1</a></li>
              <li><a href="/cohorts/two/about.html">COHORT 2</a></li>
            </ul>
          </li>   
        </ul>
          </section>
        </nav>      
      </div>

      <!-- Side bar -->
      <nav class="tab-bar show-for-small">
        <a class="left-off-canvas-toggle menu-icon" href="#">
          <span>
        Paly&nbsp;SJP
          </span>
        </a>
      </nav>

      <aside class="left-off-canvas-menu">
        <ul class="off-canvas-list">
          <li>
        <label>Menu</label>
          </li>
          <li>
        <a href="/">Paly SJP</a>
          </li>
          <li>
          <a href="about.html">About Us</a>
          </li>
          <li>
        <a href="about.html">Calendar</a>
          </li>
          <li>
        <label>Cohorts</label>
          </li>
          <li style="background-color: #3B3B3B">
        <a href="/cohort/one.html">Cohort 1</a>
          </li>
        </ul>
      </aside>

      <div class="content">
        {{ content }}
      </div>

      <div class="footer">
        <div class="row">
          <div class="large-12 columns">
        <h6 style="color:#ffffff; margin-top:24px; font-size:14px;">Keep in touch!</h6>
        <a href="https://twitter.com/palysocjustice" target="_blank">
          <img src="/assets/img/logo/footer/twitter.png" class="logo" /></a>
        <a href="https://www.facebook.com/pages/Paly-Social-Justice-Pathway/1481478495402897" target="_blank">
          <img src="/assets/img/logo/footer/facebook.png" class="logo" /></a>
        <a href="http://palysocialjustice.blogspot.com/" target="_blank">
          <img src="/assets/img/logo/footer/blogspot.png" class="logo" /></a>
          </div>
        </div>
      </div>
    </div>
      </div>

      <script type="text/javascript" src="/assets/foundation/js/vendor/jquery.js"></script>
      <script type="text/javascript" src="/assets/foundation/js/foundation.min.js"></script>
      <script type="text/javascript" src="/assets/foundation/js/foundation/foundation.clearing.js"></script>
      <script type="text/javascript" src="/assets/foundation/js/foundation/foundation.offcanvas.js"></script>
      <script type="text/javascript" src="/assets/js/custom.js"></script>


    </div>
      <script type="text/javascript">
    $(document).foundation();
      </script>

  </body>
</html>

最佳答案 如果您使用Chrome中的开发人员工具或您正在使用的任何浏览器检查aside元素,则不会显示与left-off-canvas-menu类关联的样式.

重新上传完整的foundation.css文件以确保应用适当的样式.

点赞