使用Zurb Foundation修复画布外菜单

Question

I am building a web page with Zurb Foundation. I need my web page to run on phones and laptops. What's unique about my app is I want to do something more refined than responsive design. For that reason, I'm making heavy use of the show-for-small-only and show-for-medium-up classes.

In my phone view, I'm making use of Offcanvas navigation . As the HTML is setup, it works great if you include the content of your page in the off-canvas-wrap div. However, in my scenario, I cannot do that. Instead, I want to have the content of my page outside of the off-canvas-wrap div. This creates two problems:

1. The menu doesn't grow to the size of the window.
2. If I make the right-off-canvas-menu the height of the window, it pushes my content down.

I've created a JSFiddle here that demonstrates the problem. Is there a way I can make the offcanvas menu just slide over the top of everything? I do not need to push everything to the left. Pushing is fine. My main issue is I need to have the content where it is, but still have the menu appear full-size when needed.

Thank you

Answer 1

Or if you want to actually use the offcanvas menu and simply have it overlap your content, you can add this CSS (Foundation 5)

.off-canvas-wrap.move-right,
.off-canvas-wrap.move-left,
.off-canvas-wrap.move-right .inner-wrap,
.off-canvas-wrap.move-left .inner-wrap {
    height:100%;   
}

.off-canvas-wrap {
    position: absolute;
    z-index:100;
}

.main-content-wrapper {
    padding-top: 2.8125rem;
}

And wrap your content in

<div class="main-content-wrapper">
    [your page content here]
</div>

I updated your fiddle with the changes so you can see it in action. Obviously if you want to only show the offcanvas menu conditionally, you'll want to add a media query wrapper to those rules so they only affect the page when you want them to. Otherwise you're adding padding to the top when you don't need it.

Answer 2

If you don't want your content to move when you click the navigation button, then you should not use off navigation canvas (that's what its supposed to do). Instead just use the Foundation 5 Button and set the CSS to be height = 100%

http://foundation.zurb.com/docs/components/dropdown.html