安信娱乐谁是老板

拼图开发文档

导航开关

在主导航的基础上叠加.nav-switch即显示为导航开关,常用于导航条、侧导航等。。

基本样式

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

    <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>