WordPress 中的 Zurb Foundation 5 非画布菜单答案

【问题标题】：Zurb Foundation 5 Off-Canvas menu in WordpressWordPress 中的 Zurb Foundation 5 非画布菜单
【发布时间】：2014-01-30 06:16:20
【问题描述】：

我正在尝试将 Zurb Foundation 5 集成到 Wordpress 主题中。我可以让它正常工作，但我对一个看似问题的问题感到困惑，这使它在 Wordpress 中无法运行。

请参阅此代码以使画布外菜单正常工作，并按照我概述我的问题的代码：

<div class="off-canvas-wrap">
    <div class="inner-wrap">    

        <nav class="tab-bar">
            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
            </section>
            <section class="middle tab-bar-section">
                <h1 class="title">Foundation</h1>
            </section>
            <section class="right-small">
                <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
            </section>
        </nav>

        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label>Foundation</label></li>
                <li><a href="#">The Psychohistorians</a></li>
            </ul>
        </aside>

        <aside class="right-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label>Users</label></li>
                <li><a href="#">Hari Seldon</a></li>
            </ul>
        </aside>

        <section class="main-section">
            <!-- MAIN CONTENT GOES HERE -->
        </section>

        <a class="exit-off-canvas"></a>

    </div>
</div>

似乎所有页面内容都必须包裹在接近尾端的那个元素内 - 这一切都包裹在“off-canvas-wrap”内。

如果是这样，wordpress 代码的模块化特性是如何工作的？整个页面需要在 header.php 中，没有模块化。

我觉得我一定错过了什么。

真心希望有人能帮忙。

祝你好运，安德鲁。

【问题讨论】：

标签： wordpress-theming zurb-foundation

【解决方案1】：

首先你需要让 Wordpress 中的基础没有冲突

http://naileditdesign.com/making-foundation-5-framework-no-conflict-in-wordpress/

否则 Javascirpt 不会触发来打开抽屉

这是下面的 HTML 代码，它可以在 Wordpress 中运行...

<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar hide-for-large-up">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon"><span></span></a>
</section>
<section class="middle tab-bar-section logo">
<!--centre content logo or something -->
</section>
</nav>
<aside class="left-off-canvas-menu">
 <!--Menu Here -->
</aside>
<section class="main-section">
<!-- content goes here -->
<-! Above this in this in header.php -->
<-! below this in footer.php -->
</section>
<a class="exit-off-canvas"></a>
</div>
</div>

【讨论】：

将所有内容放入
解决了我的问题。有点可惜，所有内容都必须包含在其中才能正确显示菜单，但至少我们有方便的 hide-for-... 类从桌面删除栏。

【解决方案2】：

我现在正在处理这个问题，但你可以做的是在标题中开始你的换行。

在页脚结束换行。

【讨论】：

谢谢伙计。如果您在工作后有任何建议，将不胜感激。
我正在设置一个入门主题，它实际上可能对您有很大帮助。要在它发布之前预览它，请转到 minneapolisopenmic.com/standard-page 只是我在空闲时间正在构建的东西。
谢谢伙计，我自己也在做同样的事情 :) 实际上我已经使用了很长时间，但是使用的是 Bootstrap，我现在正在构建一个 Foundation 。我会留意的；）

【解决方案3】：

除了header和footer中的代码外，off-canvas需要用wordpress注册。

Check this demo Foundation 5 + WordPress 非画布菜单的工作示例。

The source code is also available on Github

【讨论】：