43 lines
1.9 KiB
HTML
43 lines
1.9 KiB
HTML
<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>
|