All geek questions in one place

Stock vertical (separate layout) Off-Canvas covers the entire screen and only on the mobile screen

I am trying to create off-canvas using basics 6; the idea is that I have two basic column apps, and then I try to hide the one on the left only when the screen is small using the effect outside the canvas. But first I need to get this to work: col 2 get the show to the full width of the screen and the first column, this should only be activated on the screen. On the desktop screen, just show both columns on the same screen.

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

<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/

+5
source share
1 answer

In order for the off-canvas part to be displayed by default on wider screens, you need to add the "expand" class for your area without a canvas, for example reveal-for-medium . Try the following:

  <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 in the area outside the canvas. It should not be limited to a list, menu or navigation. In the above example, I just put the title and paragraph of the content.

To adjust the width of the area outside the canvas, you need to override the default CSS CSS. In this case, the .position-left.reveal-for-medium ~ .off-canvas-content selector. So in your CSS that you use to override Foundation styles (so you need to load it after Foundation 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 canvas element with a small screen by adjusting the is-open-left class, for example:

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

Move these percentages around to exactly match the effect you're looking for. In both cases, these are just standard CSS overrides. I recommend that you use the Chrome or Firebug inspectors (depending on what you use) to check the elements in the layout and play around looking for specific CSS selectors that you need to override.

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

+2
source

Source: https://habr.com/ru/post/1247283/

More articles:


All Articles