Menu icon Foundation
right off-canvas not working

Hi, 

 

I am trying to create a simple off-canvas menu but I can't get it to work from the right side of the screen, it does works from the left however. I have followed the docs here ( http://foundation.zurb.com/sites/docs/off-canvas.html ). when I change the class position to right it just opens up from the left with empty content. my code is below.

 

<!doctype html>
<html class="no-js" lang="en" dir="ltr">

<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Foundation for Sites</title>
	<link rel="stylesheet" href="css/foundation.css">
	<link rel="stylesheet" href="css/app.css">

</head>

<body>


	<div class="off-canvas-wrapper">
		<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
			<div class="off-canvas position-right" id="offCanvas" data-off-canvas>
				<button class="close-button" aria-label="Close menu" type="button" data-close=""><span aria-hidden="true">×</span></button>
				<ul class="vertical menu">
					<li>sdsd</li>
					<li>sdsd</li>
					<li>sdsd</li>
					<li>sdsd</li>
				</ul>
			</div>
			<div class="off-canvas-content" data-off-canvas-content>
					<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>

			</div>
		</div>
	</div>

	<script src="js/vendor/jquery.min.js"></script>
	<script src="js/vendor/what-input.js"></script>
	<script src="js/vendor/foundation.js"></script>
	<script src="js/app.js"></script>
	
</body>

</html>

foundation 6menuoff-canvas

Hi, 

 

I am trying to create a simple off-canvas menu but I can't get it to work from the right side of the screen, it does works from the left however. I have followed the docs here ( http://foundation.zurb.com/sites/docs/off-canvas.html ). when I change the class position to right it just opens up from the left with empty content. my code is below.

 

<!doctype html>
<html class="no-js" lang="en" dir="ltr">

<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Foundation for Sites</title>
	<link rel="stylesheet" href="css/foundation.css">
	<link rel="stylesheet" href="css/app.css">

</head>

<body>


	<div class="off-canvas-wrapper">
		<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
			<div class="off-canvas position-right" id="offCanvas" data-off-canvas>
				<button class="close-button" aria-label="Close menu" type="button" data-close=""><span aria-hidden="true">×</span></button>
				<ul class="vertical menu">
					<li>sdsd</li>
					<li>sdsd</li>
					<li>sdsd</li>
					<li>sdsd</li>
				</ul>
			</div>
			<div class="off-canvas-content" data-off-canvas-content>
					<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>

			</div>
		</div>
	</div>

	<script src="js/vendor/jquery.min.js"></script>
	<script src="js/vendor/what-input.js"></script>
	<script src="js/vendor/foundation.js"></script>
	<script src="js/app.js"></script>
	
</body>

</html>
Nicolas Lemoine over 3 years ago

Hi,

Try adding 

data-position="right"

in your div that is off-canva:

<div class="off-canvas position-right" id="offCanvas" data-off-canvas data-position="right">

Otherwise, it won't work.

Siavoush over 3 years ago

Yes that did the trick, it wasn't clear in the docs, thanks for the help