侧导航
侧导航为放在左边或右边的导航内容，可通过按钮展开和关闭，框架用.sidebar定义侧导航。
侧导航包含导航开关、标识、菜单导航等内容，内容也可其他自定义元素，因导航开关可以随意放在想要的地方，所以需要用data-sidebar='{"target":"#sidebar"}'指定侧导航对象。
基本样式
左侧导航
<div class="sidebar border-right" id="sidebar" style="width:180px;">
<ul class="nav nav-open nav-switch size-mini" data-sidebar='{"target":"#sidebar"}'><li></li><li></li><li></li></ul>
<a class="block align-center margin-top" href="javascript:;"><span class="icon-icon text-main size-large"><i></i></span></a>
<ul class="nav nav-icon nav-icon-text nav-menu nav-divider margin-top border-top border-bottom">
<li class="active"><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow sidebar-hidden">栏目</span></a></li>
<li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow sidebar-hidden">栏目</span></a></li>
<li class="nav-title">标题</li>
<li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow sidebar-hidden">栏目</span></a></li>
<li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow sidebar-hidden">栏目</span></a></li>
</ul>
</div>
右侧导航
当侧导航在右侧时，需要叠加.sidebar-right样式，当关闭状态时则叠加.sidebar-close样式，此时导航开关则为待打开状态的。
<div class="sidebar border-left sidebar-right sidebar-close" id="sidebar-right" style="width:180px;">
<ul class="nav nav-switch size-mini" data-sidebar='{"target":"#sidebar-right"}'><li></li><li></li><li></li></ul>
<a class="block align-center margin-top" href="javascript:;"><span class="icon-icon text-main size-large"><i></i></span></a>
<ul class="nav nav-icon nav-icon-text nav-menu nav-divider margin-top border-top border-bottom">
...
</ul>
</div>
显示保留
在关闭时，显示内容保留小部份，这时候需要叠加.sidebar-hold样式，同时在导航开关上定义好最小宽度min及最大宽度值max值；最小值需要隐藏的元素上添加.sidebar-hidden样式。
<div class="sidebar sidebar-hold border-right" id="sidebar-hold" style="width:180px;">
<ul class="nav nav-open nav-switch size-mini" data-sidebar='{"target":"#sidebar-hold","min":80,"max":180}'><li></li><li></li><li></li></ul>
<a class="block align-center margin-top" href="javascript:;"><span class="icon-icon text-main size-large"><i></i></span></a>
<ul class="nav nav-icon nav-icon-text nav-menu nav-divider margin-top border-top border-bottom">
<li class="active"><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow sidebar-hidden">栏目</span></a></li>
<li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow sidebar-hidden">栏目</span></a></li>
<li class="nav-title">标题</li>
<li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow sidebar-hidden">栏目</span></a></li>
<li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow sidebar-hidden">栏目</span></a></li>
</ul>
</div>
<div class="sidebar sidebar-hold sidebar-right sidebar-close border-left" id="sidebar-hold-right" style="width:80px;">
<ul class="nav nav-switch size-mini" data-sidebar='{"target":"#sidebar-hold-right","min":80,"max":180}'><li></li><li></li><li></li></ul>
<a class="block align-center margin-top" href="javascript:;"><span class="icon-icon text-main size-large"><i></i></span></a>
<ul class="nav nav-icon nav-icon-text nav-menu nav-divider margin-top border-top border-bottom">
<li class="active"><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow sidebar-hidden">栏目</span></a></li>
<li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow sidebar-hidden">栏目</span></a></li>
<li class="nav-title">标题</li>
<li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow sidebar-hidden">栏目</span></a></li>
<li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow sidebar-hidden">栏目</span></a></li>
</ul>
</div>
关联显示
当侧导航占用显示空间时，框架先用.flex做好布局，同时在侧导航上叠加.relative相对定位样式，此时关联元素可随侧导航的显示或关闭而变化。
<div class="flex">
<div class="sidebar relative" id="sidebar-show" style="width:180px;">
<ul class="nav nav-open nav-switch size-mini" data-sidebar='{"target":"#sidebar-show"}'><li></li><li></li><li></li></ul>
<a class="block align-center margin-top" href="javascript:;"><span class="icon-icon text-main size-large"><i></i></span></a>
<ul class="nav nav-icon nav-icon-text nav-menu margin-top">
...
</ul>
</div>
<div class="flex-grow">
<div class="padding-big margin-small bg radius demo-sidebar-box" align="center">content</div>
</div>
</div>
右侧及关闭状态
<div class="flex">
<div class="flex-grow">
<div class="padding-big margin-small bg radius demo-sidebar-box" align="center">content</div>
</div>
<div class="sidebar relative sidebar-right sidebar-close" id="sidebar-show-right" style="width:180px;">
<ul class="nav nav-switch size-mini" data-sidebar='{"target":"#sidebar-show-right"}'><li></li><li></li><li></li></ul>
<a class="block align-center margin-top" href="javascript:;"><span class="icon-icon text-main size-large"><i></i></span></a>
<ul class="nav nav-icon nav-icon-text nav-menu margin-top">
...
</ul>
</div>
</div>
关联保留
即为在关联显示状态下，侧导航显示时保留部份内容。
<div class="flex">
<div class="sidebar relative sidebar-hold" id="sidebar-show-hold" style="width:180px;">
<ul class="nav nav-switch nav-open size-mini" data-sidebar='{"target":"#sidebar-show-hold","min":80,"max":180}'><li></li><li></li><li></li></ul>
<a class="block align-center margin-top" href="javascript:;"><span class="icon-icon text-main size-large"><i></i></span></a>
<ul class="nav nav-icon nav-icon-text nav-menu margin-top">
...
</ul>
</div>
<div class="flex-grow">
<div class="padding-big margin-small bg radius demo-sidebar-box" align="center">content</div>
</div>
</div>
右侧及关闭状态
<div class="flex">
<div class="flex-grow">
<div class="padding-big margin-small bg radius demo-sidebar-box" align="center">content</div>
</div>
<div class="sidebar relative sidebar-hold sidebar-right sidebar-close" id="sidebar-show-hold-right" style="width:80px;">
<ul class="nav nav-switch size-mini" data-sidebar='{"target":"#sidebar-show-hold-right","min":80,"max":180}'><li></li><li></li><li></li></ul>
<a class="block align-center margin-top" href="javascript:;"><span class="icon-icon text-main size-large"><i></i></span></a>
<ul class="nav nav-icon nav-icon-text nav-menu margin-top">
...
</ul>
</div>
</div>