OffCanvas 菜单基础 6答案

【问题标题】：OffCanvas Menu Foundation 6OffCanvas 菜单基础 6
【发布时间】：2016-01-18 15:18:27
【问题描述】：

刚刚使用 Foundation 6 在 Wordpress 中工作，我正在使用非画布为移动设备构建一个菜单。但是我似乎有一个问题，内容没有加载到屏幕外菜单中，下面是我使用的代码，我把东西放在错误的地方了吗？外部 div (dragoncove_mobile_menu) 的原因是我有媒体查询来显示不同大小的不同菜单。我将在下面列出，尽管我已经尝试过没有查询并且没有任何变化。

<div id="dragoncove_mobile-menu">
<div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
        <!-- Create off canvas menu -->
        <div class="off-canvas position-left" id="offCanvas" data-off-canvas></div>
        <!-- Content -->
        <div class="off-canvas-content" data-off-canvas-content>
            <?php dragoncove_mobile_slot_1(); ?>
        </div>
    </div>

    <!-- Button Toggle -->
    <button type="button" class="dragoncove_mobile_button" data-toggle="offCanvas">Open Menu</button>

 </div>

.dragoncove_mobile_button {background: none; border: 2px solid #fff; border-radius: 5px; color: #fff; padding:10px;}

/* Small only */
@media screen and (max-width: 39.9375em) {
#dragoncove_desktop-menu {display: none;}
#dragoncove_mobile-menu {display: inline-block;}
}

/* Medium and up */
@media screen and (min-width: 40em) {
#dragoncove_desktop-menu {display: inline-block;}
#dragoncove_mobile-menu {display: none;}
}
</style>        

<!-- Menu's are registered like this -->
// Dragon Cove Mobile Menu Slot 1
function dragoncove_mobile_slot_1() {
     wp_nav_menu(array(
        'container' => false,                           // Remove nav     container
    'menu_class' => 'vertical menu',       // Adding custom nav class
    'items_wrap' => '<ul id="%1$s" class="%2$s" data-responsive-menu="accordion medium-dropdown">%3$s</ul>',
    'theme_location' => 'dc_mobile_menu_slot1',                 // Where it's located in the theme
    'depth' => 5,                                   // Limit the depth of the nav
    'fallback_cb' => false,                         // Fallback function (see below)
    'walker' => new Topbar_Menu_Walker()
));
}

【问题讨论】：

标签： php wordpress zurb-foundation-6 off-canvas-menu

【解决方案1】：

快速浏览一下，您似乎误解了它的工作原理

offcanvas 菜单区域包含在

中

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

您的所有其他内容都应包含在

中

<div class="off-canvas-content" data-off-canvas-content>

【讨论】：