Question

这是我的网站：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');

Answer 1

基础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

基础粘性Offcanvas菜单不使用foundationpress主题

1 个答案: