Foundation 6 Off Canvas Menu
Question
I am trying to add an off canvas menu to my web, but I'm a beginner with foundation and i don't know how to use it.I have read the docs of Foundation Sites and i have looked for building blocks but i can't add off canvas.This is my HTML:
<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> </div>
<div class="title-bar">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvas"></button>
<span class="title-bar-title">Title</span>
</div>
</div>
<div class="off-canvas-content" data-off-canvas-content></div>
</div>
I press the button for open off canvas but my menu doesn't appear.I have used this libraries
<link rel="stylesheet" href="style/foundation.css"/>
<script src="style/foundation.js"></script>
<script src="style/js/app.js"></script>
<script src="style/css/app.css"></script>
<script src="style/bower_components/foundation-sites/js/foundation.core.js"></script>
<script src="style/bower_components/foundation-sites/js/foundation.dropdownMenu.js"></script>
<script src="style/bower_components/jquery/dist/jquery.js"></script>
<script src="style/bower_components/foundation-sites/js/foundation.util.keyboard.js"></script>
<script src="style/bower_components/foundation-sites/js/foundation.util.box.js"></script>
<script src="style/bower_components/foundation-sites/js/foundation.util.nest.js"></script>
<script src="style/bower_components/what-input/what-input.js"></script>
<script src="style/bower_components/foundation-sites/js/foundation.offcanvas.js"></script>
Thanks
2 answers
solution1
1 2016-02-24 21:14:02
Copy this:
<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>MY OFF CANVAS</div>
<div class="off-canvas-content" data-off-canvas-content> <button type="button" class="button" data-toggle="offCanvas">Open Menu</button></div>
</div>
</div>
I hope it helps! In the div with the "Open Menu"-Button you put the hole page...
solution2
0 2016-11-15 07:47:51
some steps to help you up:
It seems like you've included all of your elements yourself. this is a bad practice and i suggest you'd include all of foundation's JS in one file (like they hand you when you download a new install of foundation in here .
please make sure you go after Foundation's structure. from the docs, the structure for an Off-Canvas element is:
Full link to the docs is here
<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>
<!-- Menu -->
<ul class="vertical menu">
<li><a href="#">Foundation</a></li>
<li><a href="#">Dot</a></li>
<li><a href="#">ZURB</a></li>
<li><a href="#">Com</a></li>
<li><a href="#">Slash</a></li>
<li><a href="#">Sites</a></li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Page content -->
</div>
</div>
</div>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.