here’s is my site: http://fspb.valse.com.my/
the offcanvas menu is not working.I tried this fiddle :http://jsfiddle.net/KBne4/12/.
In normal site where I used foundation5 it worked.But when I used with Foundationpress theme (foundation + wordpress) it doesn’t work.
CSS
.off-canvas-fixed {
-webkit-transition: -webkit-transform 500ms ease;
transition: transform 500ms ease;
}
.left-off-canvas-toggle > .off-canvas-fixed {
-webkit-transform: translate3d(15.625rem, 0, 0);
transform: translate3d(15.625rem, 0, 0);
height:100%;
}
.left-off-canvas-menu {
-webkit-transform: none;
transform: none;
margin-left: -15.625rem;
height: 100%;
}
.main-section {
padding:45px 0 0;
}
.tab-bar {
width:100%;
}
@media only screen and (orientation:landscape) and (max-width: 64em){
.main-section {
padding:0 0 0 2.8125rem;
}
.off-canvas-fixed {
width:2.8125rem;
height:100%;
background:#333333;
}
section.left-small{
border:none;
box-shadow:none;
}
}
HTML
<div class="off-canvas-wrap">
<div class="fixed off-canvas-fixed hide-for-large-up"> <a class="exit-off-canvas"></a>
<nav class="tab-bar">
<section class="left-small"> <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="show-for-portrait right tab-bar-section">
<h1 class="title">Logo</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li class="show-for-small">
</li>
<li><a href="index.php">home</a></li>
<li><a href="productlisting.php" class="selected">product</a></li>
<li><a href="">help</a></li>
<li><a href="">contact</a></li>
<li><a href="">login/sign up</a></li>
</ul>
</aside>
</div>
<div class="inner-wrap"> <a class="exit-off-canvas"></a>
</div>
</div>
script
//sticky off-canvas
wp_register_script('my_amazing_script12', 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js', array('jquery'),'1.1', false);
wp_register_script('my_amazing_script13', 'http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation.min.js', array('jquery'),'1.1', false);
wp_enqueue_script('my_amazing_script12');
wp_enqueue_script('my_amazing_script13');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts');
foundation 5 offcanvas setup requires 2 wrappers, not only 1:
You build all the stuff outside
.inner-wrap
, so it does not work 🙂See the reference manual
http://foundation.zurb.com/docs/components/offcanvas.html#basic