Foundation vertical (Split Layout) Off-Canvas covers entire screen and on mobile screen only

Question

I am trying to create an off-canvas using foundation 6; the idea is that I have two basic columns app, then I try to hide the one in the left only when the screen is small using off-canvas effect, But first I need to get this working: the col 2 get show to the full width of the screen and the first column this should activate only on screen. On desktop screen should just show both columns on one screen.

The idea is to have content, not just a menu like in the foundation examples. How can I get the effect described?

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

        <!-- Close button -->
        <button class="close-button" aria-label="Close menu" type="button" data-close>
          <span aria-hidden="true">&times;</span>
        </button>

        <!-- Page1 content -->

      </div>

      <div class="off-canvas-content" data-off-canvas-content>
        <!-- Page2 content -->
      </div>
    </div>
  </div>
</body>

Check this code: https://jsfiddle.net/q1e45fzz/16/

I want to implement the off canvas concept explained in http://www.lukew.com/ff/entry.asp?1514 — victor sosa, Apr 21 '16 at 12:35

hightempo · Accepted Answer · 2016-06-29T18:37:32.863

In order to get the off-canvas portion to display by default on wider screens, you need to add a "reveal-for" class to your off-canvas area, like reveal-for-medium. Try this:

    <div class="off-canvas-wrapper">
        <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
            <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">Open sidebar</span>
                </div>
            </div>
            <div class="off-canvas position-left reveal-for-medium" id="offCanvasLeft" data-off-canvas >
                <h3>Side area</h3>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
            <div id="widemenu" class="top-bar">
                <div class="top-bar-left">
                    Top area
                </div>
            </div>
            <div class="off-canvas-content" data-off-canvas-content>
                <div class="row column">
                    <h3>Main content</h3>
                    <p>Lorem ipsum dolor sit amet</p>
                    <img src="http://placehold.it/2000x3000" alt="" />
                </div>
            </div>
        </div>
    </div>

You can put any content you want into the off-canvas area. It doesn't have to be restricted to being a list, menu, or navigation. In the example above I just put a header and paragraph of content.

To adjust the width of the off-canvas area, you need to override the default Foundation CSS. In this case, the selector is .position-left.reveal-for-medium ~ .off-canvas-content. So in your CSS that you use to override Foundation's styles (so you need to load it after Foundation's CSS) you would do something like this:

.position-left.reveal-for-medium ~ .off-canvas-content {
  margin-left: 50%;
}

You can adjust the width of the small-screen off-canvas element by adjusting the is-open-left class, like so:

.is-open-left {
  transform: translateX(90%);
}

Move those percentage numbers around to accommodate exactly the effect you are looking for. In both of these cases, these are just standard CSS overrides. I encourage you to use your Chrome inspector or Firebug (depending on what you are using) to inspect the elements in your layout and play around with finding the specific CSS selectors that you need to override.

For more information on using inspectors, see: https://developers.google.com/web/tools/chrome-devtools/ and: http://getfirebug.com/faq/#Is_there_some_basic_description_of_how_Firebug_works

Almost there; First I need the split 50/50 for >medium, in this example is like 20/80 and Second on small screen need to be 100% of the screen(like now only the right columns is 100% of the screen); it means that I can see only one column at ones, when I click on the button it should move all the way to left and hide the right column and then click another button to go back all way to the right column and hide the left. Thanks for you help. — victor sosa, Jun 29 '16 at 18:12
To adjust the width of the columns, you just need to override the default Foundation css. There's no real Foundation-specific issue with that, just look at the DOM elements in an inspector and see how the widths are being set. In this case it's the selector `.position-left.reveal-for-medium ~ .off-canvas-content` that you need to override. I'll add a little more detail to my answer to describe that. — hightempo, Jun 29 '16 at 18:24
well that need a media query because it working for small screen too and it should be only for > medium. — victor sosa, Jun 29 '16 at 18:40
Yes, you may need to put some of the selectors in media queries, but what you're saying you still need to complete is just CSS at this point . Also, in this case, `is-open-left' is a class that's added by Foundation by JavaScript when the off-canvas area is onscreen, so it only applies to 'open' off-canvas areas. No media-query should be needed for that specific selector. — hightempo, Jun 29 '16 at 19:01

Foundation vertical (Split Layout) Off-Canvas covers entire screen and on mobile screen only

1 Answers1