图标导航

在主导航的基础上叠加.nav-icon即显示为图标导航。

新客户无门槛领取总价值高达2860元代金券，每种代金券限量500张，先到先得。_{腾讯云-新客户2860元代金券}

基本样式

图标导航内容为媒体元素.nav-media，可以是图标、图片或其他媒体元素。

    <ul class="nav nav-icon">
      <li class="active"><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span></a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span></a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span></a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span></a></li>
    </ul>

文字标题

除图标外，还会放文字内容，叠加.nav-icon-text样式，行内显示文字。叠加.nav-icon-wrap则文字换行显示。

    <ul class="nav nav-icon nav-icon-text">
      <li class="active"><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span>栏目</a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span>栏目</a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span>栏目</a></li>
    </ul>

    <ul class="nav nav-icon nav-icon-wrap">
      <li class="active"><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span>栏目</a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span>栏目</a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span>栏目</a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span>栏目</a></li>
    </ul>

图标菜单

图标导航叠加.nav-menu则纵向的菜单显示。

    <ul class="nav nav-icon nav-menu">
      <li class="active"><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span></a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span></a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span></a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span></a></li>
    </ul>

    <ul class="nav nav-icon nav-icon-text nav-menu">
      <li class="active"><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span>栏目</a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span>栏目</a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span>栏目</a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span>栏目</a></li>
    </ul>

菜单盒子

    <ul class="nav nav-icon nav-icon-text nav-menu nav-box">
      <li class="active"><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span>栏目</a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span>栏目</a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span>栏目</a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span>栏目</a></li>
    </ul>

菜单箭头

    <ul class="nav nav-icon nav-menu nav-icon-text nav-box nav-divider">
      <li class="active"><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow">栏目</span></a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow">栏目</span></a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow">栏目</span></a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow">栏目</span></a></li>
    </ul>

菜单标题

    <ul class="nav nav-icon nav-menu nav-icon-text nav-box nav-divider">
      <li class="active"><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow">栏目</span></a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow">栏目</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">栏目</span></a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon"><i></i></span><span class="nav-arrow">栏目</span></a></li>
    </ul>

综合应用

显示方式、短分隔线、导航尺寸等效果的综合应用。

    <ul class="nav nav-icon nav-block nav-box nav-divider-line nav-big">
      <li class="active"><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span></a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span></a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span></a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span></a></li>
    </ul>

深色背景

    <ul class="nav nav-icon nav-icon-wrap nav-block nav-inverse bg-main radius">
      <li class="active"><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span>栏目</a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span>栏目</a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span>栏目</a></li>
      <li><a href="javascript:;"><span class="nav-media icon-icon size-large"><i></i></span>栏目</a></li>
    </ul>