一：旧版
1:定义侧边栏并指定侧边栏滑出效果
侧边栏有两个：左侧、右侧。
侧边栏在body标签间定义。
<body> <!-- 1:添加侧边栏遮盖物 --> <div class="panel-overlay"></div> <!-- 2:定义左边栏，reval效果 --> <div class="panel panel-left panel-reveal"> ... panel content goes here ... </div> <!-- 3:定义右边栏，cover效果--> <div class="panel panel-right panel-cover"> ... panel content goes here ... </div> ... </body>
2:控制侧边栏滑出与关闭：通过<a>标签，data-panel属性指定哪边栏，class指定打开/关闭。
<div class="page-content"> <div class="content-block"> <!--1:打开右边栏 --> <p><a href="#" data-panel="right" class="open-panel">Open Right Panel</a></p> <!--2:关闭右边栏 --> <p><a href="#" data-panel="right" class="close-panel">Close me</a></p> </div> </div>
二：新版
1:定义侧边栏，并指定滑动效果
新版中，去除了遮盖物。
<body> <div id="#app"> <!--1:定义左边栏 --> <div class="panel panel-left panel-reveal"> ... panel content goes here ... </div> <!--2:定义右边栏 --> <div class="panel panel-right panel-cover"> ... panel content goes here ... </div> ... </div> </body>
2:控制边栏
同旧版。
