I tried the Release Candidate version on a new project and it fixed the 2 issues i was having! Well done Brett!

Can't wait to get home to try the new version out. I've got a project sitting with little to no css, so this is wonderful timing!

Nice Troy! Luckily if you already scaffolded, the new one works with the old markup or the simpler new markup!

What type of project is it you're working on? 

I'm creating a clean photo app for my father in law. He sends so many pictures to everyone via email, so I thought the app would be an easy way for him to share photos with everyone. Fun little side project.

Thanks Ryan and Rafi! I think it turned out great in the end, after a lot of work.

If you need any help with it Troy just let me know - there's a lot more options with it now!

I hope this component will manage the overflow-y property, in order to remain sticky, because that's such a pain having to put a huuuuge quantity of javascript hacks into it, to get the actual ViewPort ScrollTop, move the offcanvas, and listen for this on every Dom scroll event.. So let's wait and see the new one ! Hope the docs on zurb website will be...well...documented !

Hi Alex,

Are you attaching an absolute positioned element to the off-canvas container? I did that recently with the new off canvas and worked great.

I ended up doing this

.global-sidebar {
  height: 100%;
  color: white;
  z-index: 1;
  ms-overflow-style: visible;
  overflow-x: visible;
}

Also the off-canvas can be position fixed or absolute with one class so it solves the absolute need for scrollTop.

First of all: great improvements! I really like the additional options (only right and left position was never enough).

But after some testing I think I've found an issue refering to the push transition when moving the off-canvas into the content.

As mentioned in another post a few months ago I usually place the off-canvas element into the off-canvas content to avoid duplicate content. This way I can show e.g. a filter sidebar on desktop and move it into off-canvas on mobile without having two filter sections in the code.

This procedure has worked for me but using the latest RC I have the problem that the push transition doesn't work when placed inside the content but gets replaced with the overlap transition.

Here's a codepen where you can see this:
http://codepen.io/KaiTheGreat/pen/QGzjNV
one button triggers an off-canvas inside the content and the other one triggers a duplicate of it outside the content.

Am I doing something wrong in the setup or is the new off-canvas not designed for this kind of nesting?

 

Hi Kai

I'm glad you like the newest version.
You are right in that a panel needs to be outside of the content in order to initiate a transition for the push option - thats actually how the original was supposed to work too, though there was obviously ways around it. There were a few reasons for this, but I understand why you want to do what you say, and feedback is helpful to shape it going forward.

I am however working on an option in the JS to allow you to target what content will be transitioned, but I'm afraid this wont be ready for a little while (not sure if such a change would be allowed in a 6.3.1 release or if it would need to wait until 6.4).

If you could give more details on how you would normally use your off-canvas that would be really useful so I can make improvements.

Can I get some assistance with my off-canvas issue. 

http://foundation.zurb.com/forum/posts/49878-off-cavas-unresponsive 

I'd really appreciate it! I've tried a few dif versions of foundation, including this one, and can't get it to work. 

 

 Hi Brett,

thanks for your quick reply.

Yeah you're right, the original off-canvas doesn't get used the way I do either. But since it was working I didn't deal with it furthermore. Your mentioned JS option sounds good. I'm looking forward to testing it as soon as it's finished (hopefully before 6.4 :-))

Regarding more details on how I use the off-canvas:

I usually have a top bar navigation and a sidebar with some filters, linkings etc. on desktop screen size.
On mobile I move the navi into the off-canvas of one side and the sidebar into the off-canvas of the other side. Since the off-canvas class brings some styling with it (e.g. absolute position) I've created an 'in-canvas' class to undo these styles (e.g. static position) until the element is actually off-canvas. This way I can move any container on the page into the off-canvas for every breakpoint I want to.

 @kai,

So are you creating a sidebar for medium and larger and off-canvas on small?

We did that on a recent project using the .reveal-for-medium class. And if you use it this way, you only need one set of markup for your off-canvas.

<div class="off-canvas global-sidebar position-left off-canvas-absolute reveal-for-medium" id="offCanvas" data-off-canvas>

Really nice off-canvas. Coding a theme for Webasyst Shop-Script using F6.

New off-canvas helped a lot. Exellent job!

@Rafi: yes, the sidebar is used either for medium up or for large up (dependent on the project)

You're combination of off-canvas-absolute and reveal-for- is interesting but you can't limit it to specific breakpoints, can you?

In my projects I need the sidebar to act as a regular non-off-canvas element (no position absolute/fixed) on desktop screen size and to 'transform' into off-canvas for mobile.
In my latest project I've achieved this by creating a breakpoint based off-canvas class (.off-canvas-medium-down) but I've also experimented with an .in-canvas-for- class that 'undoes' the off-canvas styles (position static etc.)

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>

Would you be able to post a codepen or something similar?

Hi Keke

As Troy said, a CodePen example would really help. Failing that can you give me an idea of what you are trying to achieve?

Then I can try and help you get it working.

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, This seems like a different topic. It would be best to create a new thread for it. Thanks!

So I know the new off-canvas now allows you to use .sticky and fixed position elements outside the content area but for some reason if you place a fixed position element inside the (.off-canvas-content) section - it does not remain fixed once the menu is open.

The example below demonstrates the issue:
EXAMPLE

If you scroll down to the point where the NAV bar animates and than try to open the Off-Canvas menus / the NAV bar no longer remains in position and is pushed out of sight.

Is there anyway to achieve a fixed element when the off-canvas-content is both open and closed?

Thanks
> j