css - 基础粘性Offcanvas菜单不适用于Foundationpress主题

这是我的网站：http://fspb.valse.com.my/

offcanvas菜单不起作用。我尝试了这个小提琴：http://jsfiddle.net/KBne4/12/。

在我使用Foundation5的普通站点中它可以工作，但是当我使用Foundationpress主题（基础+ wordpress）时，它不起作用。

的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>

脚本

//粘性画布

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设置需要2个包装，而不仅仅是1个：

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
    ...
    </div>
</div>

您在.inner-wrap之外构建了所有东西，所以它不起作用:)

请参阅参考手册
http://foundation.zurb.com/docs/components/offcanvas.html#basic

关于css - 基础粘性Offcanvas菜单不适用于Foundationpress主题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27935786/