Menu icon Foundation
Foundation 6 Off Canvas Menu

I'm confused about how to get off canvas menu to work in Foundation 6: http://goplaydodgeball.org/test-nav

<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>
				Off Canvas Content
			</div>
			<div class="off-canvas-content" data-off-canvas-content>
				Main Content
				<button type="button" class="button" data-toggle="offCanvas">Open Menu</b </div>
			</div>
		</div>
</body>
            

         

offcanvas

I'm confused about how to get off canvas menu to work in Foundation 6: http://goplaydodgeball.org/test-nav

<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>
				Off Canvas Content
			</div>
			<div class="off-canvas-content" data-off-canvas-content>
				Main Content
				<button type="button" class="button" data-toggle="offCanvas">Open Menu</b </div>
			</div>
		</div>
</body>
            

         
Glenn Philp over 3 years ago

Hey Dustin,

I noticed your foundation.min.js file is empty, thus your call to initialize foundation isn't working. Inspect your page and you will see an error of undefined. If it still doesn't work after getting the foundation.min.js file let me know.

Dustin Pearce over 3 years ago

Thanks Glenn Philp! I added the code (dumb mistake), but it's still not working...

hassan over 3 years ago

it's your code

you body tag closed before scripts just remove that tag and it will work :P

hassan over 3 years ago

 </body>

<script src="assets/js/vendor/jquery.min.js"></script>
<script src="assets/js/foundation/foundation.min.js"></script>
<script src="assets/js/foundation/app.js"></script>
</body>

Dustin Pearce over 3 years ago

Thanks Hasson! Another dumb mistake on my part... Still is not working though :(

hassan over 3 years ago

@Dustin Pearce bro try foundation.js instead of .min file its sometime error with jquery i checked same code and its working very well

Brikowski over 3 years ago

@hassan Behavior can be different with min.css and css? That's actually quite alarming.

Ryan McCready over 2 years ago

Good news! Thanks to your feedback there was a push to build something better. In Foundation 6.3, released on Dec 15th, there is an all new improved off-canvas. We’d love to hear the challenges or common patterns with off-canvas are you working with. Check out the details and jump in on the conversation!

 

 http://foundation.zurb.com/forum/posts/49868-new-improved-off-canvas-in-foundation-63

 

Alexandru over 2 years ago

@Ryan McCready, your link is 404 ...

I have some trouble with my off canvas, suddenly stopped working, and I have no error or something.

Don't work even with this example : http://foundation.zurb.com/sites/docs/off-canvas.html

Alexandru over 2 years ago

Yeah, everything work now with version 6.3.0-rc3, in 6.2.4, just don't work...

And finaly in 6.2.4, I found a error :

foundation.js:195 TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at OffCanvas._init (foundation.js:4827)
    at new OffCanvas (foundation.js:4781)
    at HTMLDivElement.<anonymous> (foundation.js:193)
    at Function.each (jquery.js:365)
    at jQuery.fn.init.each (jquery.js:137)
    at String.<anonymous> (foundation.js:175)
    at Function.each (jquery.js:365)
    at Object.reflow (foundation.js:167)
    at jQuery.fn.init.foundation (foundation.js:275)
    at HTMLDocument.<anonymous> (app.js:3)

Brett Mason over 2 years ago

@Alexandru The link that Ryan shared should of been this: http://foundation.zurb.com/forum/posts/49868-new-improved-off-canvas-in-foundation-63

Version 6.3 should be out today and I'm confident this should fix any issues you have. Let me know if you need any help though.