Using Foundation 5 off-canvas-menu with Wordpress

Reading the example on Zurb’s docs, I get the impression that you would take this code and break it up into smaller templates like how the _s theme does it.

Starting in your header.php

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

Then using get_template_part() for example a template named tab-bar could be:

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

Then another template named left-off-canvas could call:

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

And yet another template could call the right off canvas.

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

Next in your index.php file you can then call the loop with your main content

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

Then close it all off in your footer.php

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

 </div>
</div>

Using templates this way can really break up and keep the modularity your looking for.

Related Posts: