卡片导航
在主导航的基础上叠加.nav-card
即显示为卡片导航。
基本样式
<ul class="nav nav-card">
<li class="active"><a href="javascript:;">栏目</a></li>
<li><a href="javascript:;">栏目</a></li>
<li><a href="javascript:;">栏目</a></li>
<li class="disabled"><a href="javascript:;">栏目</a></li>
</ul>
卡片菜单
<ul class="nav nav-card nav-box nav-menu">
<li class="active"><a href="javascript:;">栏目</a></li>
<li><a href="javascript:;">栏目</a></li>
<li><a href="javascript:;">栏目</a></li>
<li class="disabled"><a href="javascript:;">栏目</a></li>
</ul>
综合应用
显示方式、短分隔线、导航尺寸、子菜单等效果的综合应用。
<ul class="nav nav-card nav-block nav-box nav-divider-line nav-big">
<li class="drop active">
<a href="javascript:;">栏目</a>
<div class="dropdown">
<ul class="nav nav-menu nav-card nav-box nav-divider bg-white">
<li><a href="javascript:;">子栏目</a></li>
<li class="active"><a href="javascript:;">子栏目</a></li>
<li><a href="javascript:;">子栏目</a></li>
<li><a href="javascript:;">子栏目</a></li>
</ul>
</div>
</li>
<li><a href="javascript:;">栏目</a></li>
<li><a href="javascript:;">栏目</a></li>
<li class="disabled"><a href="javascript:;">栏目</a></li>
</ul>
深色背景
<div class="bg-main padding radius"> <ul class="nav nav-card nav-inverse"> <li class="drop active"> <a href="javascript:;">栏目</a> <div class="dropdown"> <ul class="nav nav-card nav-menu nav-box nav-divider bg-white"> <li><a href="javascript:;">子栏目</a></li> <li class="active"><a href="javascript:;">子栏目</a></li> <li><a href="javascript:;">子栏目</a></li> <li><a href="javascript:;">子栏目</a></li> </ul> </div> </li> <li><a href="javascript:;">栏目</a></li> <li><a href="javascript:;">栏目</a></li> <li class="disabled"><a href="javascript:;">栏目</a></li> </ul> </div>