Menu icon Foundation
Do not load the CSS

Hi, I downloaded verrsion foundation 6.2.4, but the examples in the documentation do not load the styles, in elements like the Nav, the Off-canvas and the pricing tables, I have replaced downloaded and insured that both js. And the css are loaded to my project but it just does not work.  Es como si las clases no existiera pero con la algunas cosas funcionan y otrs no

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Home</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.css" />
    <!-- The style sheet below is fine if the path is on your server -->
    <link rel="stylesheet" type="text/css" href="/site/templates/styles/main.css" />
  </head>
  <body>
<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title">Foundation</h1>
      </section>

      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
      </section>
    </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li class="has-submenu"><a href="#">The Psychohistorians</a>
            <ul class="left-submenu">
                <li class="back"><a href="#">Back</a></li>
                <li><label>Level 1</label></li>
                <li><a href="#">Link 1</a></li>
                <li class="has-submenu"><a href="#">Link 2 w/ submenu</a>
                    <ul class="left-submenu">
                        <li class="back"><a href="#">Back</a></li>
                        <li><label>Level 2</label></li>
                        <li><a href="#">...</a></li>
                    </ul>
                </li>
                <li><a href="#">...</a></li>
            </ul>
        </li>
        <li><a href="#">The Encyclopedists</a></li>
        <li><a href="#">The Mayors</a></li>
        <li><a href="#">The Traders</a></li>
        <li><a href="#">The Merchant Princes</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Hari Seldon</a></li>
        <li class="has-submenu"><a href="#">R. Giskard Reventlov</a>
            <ul class="right-submenu">
                <li class="back"><a href="#">Back</a></li>
                <li><label>Level 1</label></li>
                <li><a href="#">Link 1</a></li>
                <li class="has-submenu"><a href="#">Link 2 w/ submenu</a>
                    <ul class="right-submenu">
                        <li class="back"><a href="#">Back</a></li>
                        <li><label>Level 2</label></li>
                        <li><a href="#">...</a></li>
                    </ul>
                </li>
                <li><a href="#">...</a></li>
            </ul>
        </li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <section class="main-section">
      <!-- content goes here -->
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
   <!-- *** The following CND link will include all foundation features -->
   <!-- There is no need to include the individual scripts if you have this -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.min.js"></script>
   <script> $(document).foundation(); </script>
</body>
</html>

 

htmloff canvasFOUNDATION 6.2.4css

Hi, I downloaded verrsion foundation 6.2.4, but the examples in the documentation do not load the styles, in elements like the Nav, the Off-canvas and the pricing tables, I have replaced downloaded and insured that both js. And the css are loaded to my project but it just does not work.  Es como si las clases no existiera pero con la algunas cosas funcionan y otrs no

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Home</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.css" />
    <!-- The style sheet below is fine if the path is on your server -->
    <link rel="stylesheet" type="text/css" href="/site/templates/styles/main.css" />
  </head>
  <body>
<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title">Foundation</h1>
      </section>

      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
      </section>
    </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li class="has-submenu"><a href="#">The Psychohistorians</a>
            <ul class="left-submenu">
                <li class="back"><a href="#">Back</a></li>
                <li><label>Level 1</label></li>
                <li><a href="#">Link 1</a></li>
                <li class="has-submenu"><a href="#">Link 2 w/ submenu</a>
                    <ul class="left-submenu">
                        <li class="back"><a href="#">Back</a></li>
                        <li><label>Level 2</label></li>
                        <li><a href="#">...</a></li>
                    </ul>
                </li>
                <li><a href="#">...</a></li>
            </ul>
        </li>
        <li><a href="#">The Encyclopedists</a></li>
        <li><a href="#">The Mayors</a></li>
        <li><a href="#">The Traders</a></li>
        <li><a href="#">The Merchant Princes</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Hari Seldon</a></li>
        <li class="has-submenu"><a href="#">R. Giskard Reventlov</a>
            <ul class="right-submenu">
                <li class="back"><a href="#">Back</a></li>
                <li><label>Level 1</label></li>
                <li><a href="#">Link 1</a></li>
                <li class="has-submenu"><a href="#">Link 2 w/ submenu</a>
                    <ul class="right-submenu">
                        <li class="back"><a href="#">Back</a></li>
                        <li><label>Level 2</label></li>
                        <li><a href="#">...</a></li>
                    </ul>
                </li>
                <li><a href="#">...</a></li>
            </ul>
        </li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <section class="main-section">
      <!-- content goes here -->
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
   <!-- *** The following CND link will include all foundation features -->
   <!-- There is no need to include the individual scripts if you have this -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.min.js"></script>
   <script> $(document).foundation(); </script>
</body>
</html>

 

Ryan McCready almost 3 years ago

Hi Jeiel,

This looks like one of the templates that you can download from Foundation 6.

If you were interested in downloading the whole framework, you can go here: http://foundation.zurb.com/sites/download.html/

jeiel almost 3 years ago

I have already downloaded the complete and the custom, The pŕoblema is the same, I have also removed the cokies from my browser. I set the example with the assets of the web to indicate that the problem is the same