<section id="menu_section">
    <header>
        <nav class="left">
            <a href="#" data-icon="undo" data-target="back">返回</a>
        </nav>
        <h1 class="title">侧边菜单栏</h1>
    </header>
    <article class="active" id="menu_article"  data-scroll="true">
        <div class="scrollWrapper">
            <h1> 左侧菜单栏</h1>
            <div>
                <a class="button" href="#left_push_aside" data-target="menu">push</a>
                <a class="button" href="#left_overlay_aside" data-target="menu">overlay</a>
                <a class="button" href="#left_reveal_aside" data-target="menu">reveal</a>
                <a class="button" href="#show_close_aside" data-target="menu">show close</a>
            </div>
            <h1> 右侧菜单栏</h1>
            <div>
                <a class="button" href="#right_push_aside" data-target="menu">push</a>
                <a class="button" href="#right_overlay_aside" data-target="menu">overlay</a>
                <a class="button" href="#right_reveal_aside" data-target="menu">reveal</a>
                <a class="button" href="#custom_width_aside" data-target="menu">自定义宽度</a>
            </div>

            <div>
                <ul class="list inset">
                    <li class="divider">aside上的配置</li>
                    <li>默认宽度为264px</li>
                    <li>data-position="left | right"</li>
                    <li>data-transition="push | overlay | reveal"</li>
                    <li>data-show-close="true | false"</li>
                    <li class="divider">push</li>
                    <li>侧边栏与页面同时滑动</li>
                    <li class="divider">overlay</li>
                    <li>侧边栏从页面上层划出</li>
                    <li class="divider">reveal</li>
                    <li>侧边栏在底部，页面其上方划出</li>
                </ul>
            </div>
        </div>
    </article>
</section>