Menu icon Foundation

Coder

My Posts




My Comments

Phoenix Kawlay commented on Phoenix Kawlay's post over 1 year

Anyone?

Phoenix Kawlay commented on Phoenix Kawlay's post over 3 years

No way to do this meaningfully in F6, then. It's a little silly. Off to other libraries then. Thank you world.

Phoenix Kawlay commented on Phoenix Kawlay's post over 3 years

No ideas? The documentation isn't very helpful.

Phoenix Kawlay commented on Phoenix Kawlay's post over 3 years

Thank you Dennis. Read the documentation. It doesn't help.

I downloaded this "building block" contributed by Brian Tan. It doesn't work with a completely fresh download of Foundation 6!

Below is the full code. THe HTML overall is from the stock index.html file. But I changed the middle to include the Brian Tan Building Block code -- straight copy paste.

This does NOT work. It opens the off canvas menu, but it doesn't close.

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>Foundation 6 Off Canvas test</title>
    <link rel="stylesheet prefetch" href="css/foundation.min.css">
  </head>

  <body>

<div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

    <!-- off-canvas title bar for 'small' screen -->
    <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
      <div class="title-bar-left">
        <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
        <span class="title-bar-title">Foundation</span>
      </div>
      <div class="title-bar-right">
        <span class="title-bar-title">Login</span>
        <button class="menu-icon" type="button" data-open="offCanvasRight"></button>
      </div>
    </div>

    <!-- off-canvas left menu -->
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
      <ul class="vertical dropdown menu" data-dropdown-menu>
        <li><a href="left_item_1">Left item 1</a></li>
        <li><a href="left_item_2">Left item 2</a></li>
        <li><a href="left_item_3">Left item 3</a></li>
      </ul>
    </div>

    <!-- off-canvas right menu -->
    <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
      <ul class="vertical dropdown menu" data-dropdown-menu>
        <li><a href="right_item_1">Right item 1</a></li>
        <li><a href="right_item_2">Right item 2</a></li>
        <li><a href="right_item_3">Right item 3</a></li>
      </ul>
    </div>

    <!-- "wider" top-bar menu for 'medium' and up -->
    <div id="widemenu" class="top-bar">
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menu-text">Foundation</li>
          <li class="has-submenu">
            <a href="#">Item 1</a>
            <ul class="menu submenu vertical" data-submenu>
              <li><a href="left_wide_11">Left wide 1</a></li>
              <li><a href="left_wide_12">Left wide 2</a></li>
              <li><a href="left_wide_13">Left wide 3</a></li>
            </ul>
          </li>
          <li class="has-submenu">
            <a href="#">Item 2</a>
            <ul class="menu submenu vertical" data-submenu>
              <li><a href="left_wide_21">Left wide 1</a></li>
              <li><a href="left_wide_22">Left wide 2</a></li>
              <li><a href="left_wide_23">Left wide 3</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li><input type="search" placeholder="Search"></li>
          <li><button class="button">Search</button></li>
        </ul>
      </div>
    </div>

    <!-- original content goes in this container -->
    <div class="off-canvas-content" data-off-canvas-content>
      <div class="row column">
        <img src="http://placehold.it/2000x3000" alt="" />
      </div>
    </div>

  <!-- close wrapper, no more content after this -->
  </div>
</div>



<script src="js/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>

        <script>
      $(document).foundation();
      //@ sourceURL=pen.js
    </script>


  </body>
</html>


Phoenix Kawlay commented on Phoenix Kawlay's post almost 4 years

Thank you but I'm not looking for a top bar inside the page. I want the absolutely top navigation bar to also have the off canvas. Is it possible to see this happen?

Phoenix Kawlay commented on Peter Graff's post almost 4 years

Could the original poster please share the code that eventually worked, despite this arcane hoops one has to jump through to get this very basic setup going in Foundation?

Top bar + off canvas. This is the default expectation in a responsive world. Yet, with Foundation we have to tear our hair out to get this simple thing going.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Phoenix Kawlay's post over 1 year

Anyone?

You commented on Phoenix Kawlay's post over 3 years

No way to do this meaningfully in F6, then. It's a little silly. Off to other libraries then. Thank you world.

You commented on Phoenix Kawlay's post over 3 years

No ideas? The documentation isn't very helpful.

You commented on Phoenix Kawlay's post over 3 years

Thank you Dennis. Read the documentation. It doesn't help.

I downloaded this "building block" contributed by Brian Tan. It doesn't work with a completely fresh download of Foundation 6!

Below is the full code. THe HTML overall is from the stock index.html file. But I changed the middle to include the Brian Tan Building Block code -- straight copy paste.

This does NOT work. It opens the off canvas menu, but it doesn't close.

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>Foundation 6 Off Canvas test</title>
    <link rel="stylesheet prefetch" href="css/foundation.min.css">
  </head>

  <body>

<div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

    <!-- off-canvas title bar for 'small' screen -->
    <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
      <div class="title-bar-left">
        <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
        <span class="title-bar-title">Foundation</span>
      </div>
      <div class="title-bar-right">
        <span class="title-bar-title">Login</span>
        <button class="menu-icon" type="button" data-open="offCanvasRight"></button>
      </div>
    </div>

    <!-- off-canvas left menu -->
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
      <ul class="vertical dropdown menu" data-dropdown-menu>
        <li><a href="left_item_1">Left item 1</a></li>
        <li><a href="left_item_2">Left item 2</a></li>
        <li><a href="left_item_3">Left item 3</a></li>
      </ul>
    </div>

    <!-- off-canvas right menu -->
    <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
      <ul class="vertical dropdown menu" data-dropdown-menu>
        <li><a href="right_item_1">Right item 1</a></li>
        <li><a href="right_item_2">Right item 2</a></li>
        <li><a href="right_item_3">Right item 3</a></li>
      </ul>
    </div>

    <!-- "wider" top-bar menu for 'medium' and up -->
    <div id="widemenu" class="top-bar">
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menu-text">Foundation</li>
          <li class="has-submenu">
            <a href="#">Item 1</a>
            <ul class="menu submenu vertical" data-submenu>
              <li><a href="left_wide_11">Left wide 1</a></li>
              <li><a href="left_wide_12">Left wide 2</a></li>
              <li><a href="left_wide_13">Left wide 3</a></li>
            </ul>
          </li>
          <li class="has-submenu">
            <a href="#">Item 2</a>
            <ul class="menu submenu vertical" data-submenu>
              <li><a href="left_wide_21">Left wide 1</a></li>
              <li><a href="left_wide_22">Left wide 2</a></li>
              <li><a href="left_wide_23">Left wide 3</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li><input type="search" placeholder="Search"></li>
          <li><button class="button">Search</button></li>
        </ul>
      </div>
    </div>

    <!-- original content goes in this container -->
    <div class="off-canvas-content" data-off-canvas-content>
      <div class="row column">
        <img src="http://placehold.it/2000x3000" alt="" />
      </div>
    </div>

  <!-- close wrapper, no more content after this -->
  </div>
</div>



<script src="js/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>

        <script>
      $(document).foundation();
      //@ sourceURL=pen.js
    </script>


  </body>
</html>


You commented on Phoenix Kawlay's post almost 4 years

Thank you but I'm not looking for a top bar inside the page. I want the absolutely top navigation bar to also have the off canvas. Is it possible to see this happen?

You commented on Peter Graff's post almost 4 years

Could the original poster please share the code that eventually worked, despite this arcane hoops one has to jump through to get this very basic setup going in Foundation?

Top bar + off canvas. This is the default expectation in a responsive world. Yet, with Foundation we have to tear our hair out to get this simple thing going.

Posts Followed

Following

  • No Content

Followers

  • No Content