导航开关

基本样式

导航开关样式为三条横线组成，意为菜单列表。

    <ul class="nav nav-switch">
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
  

两线

开关内的线条，可以是两条起，数量根据需求而定。

    <ul class="nav nav-switch">
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
  

多线

开关内的a元素可删除，线条数量也可自由增加。

    <ul class="nav nav-switch">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  

大小

开关大小用字号控制，可用已定义的.size-大小改变大小。

    <ul class="nav nav-switch size-mini">
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
    <ul class="nav nav-switch size-big">
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
  

颜色

开关颜色用文本色控制，可用已定义的.text-颜色改变颜色。

    <ul class="nav nav-switch text-main">
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
    <ul class="nav nav-switch text-danger">
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
  

交互

在导航开关上，添加data-navswitch属性，值为展开的对象。

    <ul class="nav nav-switch text-success" data-navswitch="#navswitch">
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
    <div id="navswitch" style="display:none;">导航开关</div>