Foundation 侧滑菜单 - 学习 Foundation 5

Foundation Off-Canvas 侧滑菜单是在移动页面变得越来越流行了

可以点击菜单按钮菜单从左侧滑出

创建侧滑菜单

Foundation .off-canvas-wrap CSS 类和 data-offcanvas 用于创建一个侧滑菜单

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">    
        <nav class="tab-bar">
            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
            </section>
            <section class="middle tab-bar-section">
                <h1 class="title">侧滑菜单范例</h1>
            </section>
        </nav>
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list test">
                <li><label>Heading</label></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </aside>
        <section class="main-section">
            <h3>Lorem Ipsum</h3>
            <p>....</p>
        </section>
        <a class="exit-off-canvas"></a>
    </div>
</div>
<script>
$(document).ready(function() {$(document).foundation();})
</script>

运行范例 »