Menu
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">×</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/
787
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
165
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
