导航开关
在主导航的基础上叠加.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>