Menu icon Foundation

Designer

My Posts









My Comments

Keke commented on Keke's post over 2 years

The _settings.scss and app.scss were older. Do I need to redownload an entirely new 6.3 project and start from there? Thx!

Keke commented on Ryan McCready's post over 2 years

Here are two links. The first one is using foundation 6.2.4 js and the menu is mostly working though off to the right part of it shows:
 
https://www.midians.com/newsite/tab-test.php
The next one is the same but is using foundation 6.3 js. The off-canvas menu is not working at all:
https://www.midians.com/newsite/tab-test-6-3.php
 
Basically when on mobile devices I want the menu to be a drill down off-canvas. This site has a lot of products which makes the menus a mess.
On a non-menu related issue. When I use 6.3.0 my responsive accordion tabs work and when I use 6.2.4 they don't.
Thank you for your help!!

Keke commented on Keke's post over 2 years

Also, if I link to version 6.3.0 of foundation.js the off-canvas isn't working for me at all. I have to use an older version to get it to work?

Keke commented on Ryan McCready's post over 2 years

I am having major problems getting the close button to work on the off-canvas drilldown menu. If I use the code that is in the sample here that utilizes the dropdown menu it works but as soon as I change it to drilldown it will not work!http://zurb.com/building-blocks/top-bar-with-off-canvas
IT SEEMS LIKE CHANGING THIS:
<ul class="vertical dropdown menu" data-dropdown-menu>
TO THIS
<ul class="menu" data-drilldown>
IS CAUSING THE PROBLEM. WHAT AM I DOING WRONG? GETTING READY TO PULL MY HAIR OUT OR TRY A THIRD PARTY MENU SOLUTION!! Thank you for any help!
Here is code sample below:
<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 dark" 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>
    <!-- Close button -->
    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>
      <ul class="menu" data-drilldown>
      <li>
<a href="#">Item 1</a>
<ul class="menu">
<li>
<a href="#">Item 1A</a>
<ul class="menu">
<li><a href="#Item-1Aa">Item 1Aa</a></li>
<li><a href="#Item-1Ba">Item 1Ba</a></li>
<li><a href="#Item-1Ca">Item 1Ca</a></li>
<li><a href="#Item-1Da">Item 1Da</a></li>
<li><a href="#Item-1Ea">Item 1Ea</a></li>
</ul>
</li>
<li><a href="#Item-1B">Item 1B</a></li>
<li><a href="#Item-1C">Item 1C</a></li>
<li><a href="#Item-1D">Item 1D</a></li>
<li><a href="#Item-1E">Item 1E</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="menu">
<li><a href="#Item-2A">Item 2A</a></li>
<li><a href="#Item-2B">Item 2B</a></li>
<li><a href="#Item-2C">Item 2C</a></li>
<li><a href="#Item-2D">Item 2D</a></li>
<li><a href="#Item-2E">Item 2E</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="menu">
<li><a href="#Item-3A">Item 3A</a></li>
<li><a href="#Item-3B">Item 3B</a></li>
<li><a href="#Item-3C">Item 3C</a></li>
<li><a href="#Item-3D">Item 3D</a></li>
<li><a href="#Item-3E">Item 3E</a></li>
</ul>
</li>
<li><a href="#Item-4"> Item 4</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="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>
 
    
     <div class="off-canvas-content" data-off-canvas-content>
      <div class="row">
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
     </div>
    </div>
  <!-- close wrapper, no more content after this -->
 </div>
</div>

Keke commented on Keke's post about 3 years

I just saw this - thank
you!

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Keke's post over 2 years

The _settings.scss and app.scss were older. Do I need to redownload an entirely new 6.3 project and start from there? Thx!

You commented on Ryan McCready's post over 2 years

Here are two links. The first one is using foundation 6.2.4 js and the menu is mostly working though off to the right part of it shows:
 
https://www.midians.com/newsite/tab-test.php
The next one is the same but is using foundation 6.3 js. The off-canvas menu is not working at all:
https://www.midians.com/newsite/tab-test-6-3.php
 
Basically when on mobile devices I want the menu to be a drill down off-canvas. This site has a lot of products which makes the menus a mess.
On a non-menu related issue. When I use 6.3.0 my responsive accordion tabs work and when I use 6.2.4 they don't.
Thank you for your help!!

You commented on Keke's post over 2 years

Also, if I link to version 6.3.0 of foundation.js the off-canvas isn't working for me at all. I have to use an older version to get it to work?

You commented on Ryan McCready's post over 2 years

I am having major problems getting the close button to work on the off-canvas drilldown menu. If I use the code that is in the sample here that utilizes the dropdown menu it works but as soon as I change it to drilldown it will not work!http://zurb.com/building-blocks/top-bar-with-off-canvas
IT SEEMS LIKE CHANGING THIS:
<ul class="vertical dropdown menu" data-dropdown-menu>
TO THIS
<ul class="menu" data-drilldown>
IS CAUSING THE PROBLEM. WHAT AM I DOING WRONG? GETTING READY TO PULL MY HAIR OUT OR TRY A THIRD PARTY MENU SOLUTION!! Thank you for any help!
Here is code sample below:
<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 dark" 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>
    <!-- Close button -->
    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>
      <ul class="menu" data-drilldown>
      <li>
<a href="#">Item 1</a>
<ul class="menu">
<li>
<a href="#">Item 1A</a>
<ul class="menu">
<li><a href="#Item-1Aa">Item 1Aa</a></li>
<li><a href="#Item-1Ba">Item 1Ba</a></li>
<li><a href="#Item-1Ca">Item 1Ca</a></li>
<li><a href="#Item-1Da">Item 1Da</a></li>
<li><a href="#Item-1Ea">Item 1Ea</a></li>
</ul>
</li>
<li><a href="#Item-1B">Item 1B</a></li>
<li><a href="#Item-1C">Item 1C</a></li>
<li><a href="#Item-1D">Item 1D</a></li>
<li><a href="#Item-1E">Item 1E</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="menu">
<li><a href="#Item-2A">Item 2A</a></li>
<li><a href="#Item-2B">Item 2B</a></li>
<li><a href="#Item-2C">Item 2C</a></li>
<li><a href="#Item-2D">Item 2D</a></li>
<li><a href="#Item-2E">Item 2E</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="menu">
<li><a href="#Item-3A">Item 3A</a></li>
<li><a href="#Item-3B">Item 3B</a></li>
<li><a href="#Item-3C">Item 3C</a></li>
<li><a href="#Item-3D">Item 3D</a></li>
<li><a href="#Item-3E">Item 3E</a></li>
</ul>
</li>
<li><a href="#Item-4"> Item 4</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="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>
 
    
     <div class="off-canvas-content" data-off-canvas-content>
      <div class="row">
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
        <p>this is test.
        </p>
     </div>
    </div>
  <!-- close wrapper, no more content after this -->
 </div>
</div>

You commented on Keke's post about 3 years

I just saw this - thank
you!

Posts Followed

Following

  • No Content

Followers

  • No Content