Menu icon Foundation
Close button not working on off-canvas drilldown menu

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>

off-canvasdrilldownmenuResponsiveoff canvas

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 over 2 years ago

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?

Brett Mason over 2 years ago

I thought it would be easier to go over your problems here rather than in the other off canvas thread.
So looking at your site (https://www.midians.com/newsite/tab-test-6-3.php) you have a few issues going on.

You said this was a 6.3 site, however the CSS thats being loaded is definately not 6.3, as the off canvas classes are styled differently. Can you check this first?

Then I notice you have a div in between the off canvas and the off canvas content (widemenu). Can you move this before the off canvas? The CSS requires them to be next to eachover.

The markup is also different for 6.3 (less of it) see here: http://foundation.zurb.com/sites/docs/off-canvas.html#wrapper

Give that a go and see how we get on.

Keke over 2 years ago

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