layui-ul/demo/nav.html

<fieldset class="layui-elem-field layui-field-title">
  <legend>银色垂直导航</legend>
  <div class="layui-field-box">
    <ul class="layui-nav layui-nav-tree ul-nav-white">
      <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
      <li class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;">默认展开</a>
        <dl class="layui-nav-child">
          <dd class="layui-this"><a href="javascript:;">选项1</a></dd>
          <dd><a href="javascript:;">选项2</a></dd>
          <dd><a href="">跳转</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child">
          <dd><a href="">移动模块</a></dd>
          <dd><a href="">后台模版</a></dd>
          <dd><a href="">电商平台</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item layui-this"><a href="">产品</a></li>
      <li class="layui-nav-item"><a href="">大数据</a></li>
    </ul>
  </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
  <legend>附带说明垂直导航</legend>
  <div class="layui-field-box">
    <div class="ul-section">
      <div class="ul-nav-tree ul-padding-md">

        <div class="ul-nav-tree-group">
          <div class="ul-nav-tree-group-title">起步</div>
          <div class="ul-nav-tree-group-main">
            <a href="" class="ul-nav-tree-item current">
              <div class="ul-nav-tree-item-title">欢迎</div>
              <div class="ul-nav-tree-item-desc">项目介绍/使用说明</div>
            </a>
            <a href="" class="ul-nav-tree-item">
              <div class="ul-nav-tree-item-title">开始使用</div>
              <div class="ul-nav-tree-item-desc">安装方式,注意事项</div>
            </a>
            <a href="" class="ul-nav-tree-item">
              <div class="ul-nav-tree-item-title">如何使用</div>
              <div class="ul-nav-tree-item-desc">复制组件</div>
            </a>
          </div>
        </div>
        <div class="ul-nav-tree-group">
          <div class="ul-nav-tree-group-title">
            组件 </div>
          <div class="ul-nav-tree-group-main">
            <a href="" class="ul-nav-tree-item">
              <div class="ul-nav-tree-item-title">列表</div>
              <div class="ul-nav-tree-item-desc">用户列表/文章列表...</div>
            </a>
            <a href="" class="ul-nav-tree-item">
              <div class="ul-nav-tree-item-title">头部</div>
              <div class="ul-nav-tree-item-desc">页面头</div>
            </a>
            <a href="" class="ul-nav-tree-item">
              <div class="ul-nav-tree-item-title">导航</div>
              <div class="ul-nav-tree-item-desc">横竖导航/多级导航</div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
  <legend>无底色简约导航</legend>
  <div class="layui-field-box">
    <ul class="layui-nav layui-nav-tree ul-nav-easy" lay-filter="user-nav">
      <li class="layui-nav-item"><a href="">概况</a></li>
      <li class="layui-nav-item layui-this"><a href="">文章管理</a></li>
      <li class="layui-nav-item"><a href="">素材管理</a></li>
      <li class="layui-nav-item"><a href="">评论管理</a></li>
      <li class="layui-nav-item"><a href="">消息通知</a></li>
      <li class="layui-nav-item"><a href="">数据分析</a></li>
      <li class="layui-nav-item"><a href="">粉丝管理</a></li>
      <li class="layui-nav-item"><a href="">私信管理</a></li>
      <li class="layui-nav-item"><a href="">帐号设置</a></li>
    </ul>
  </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
  <legend>最简单的导航</legend>
  <div class="layui-field-box">
    <div class="ul-padding-md">
      <div class="ul-nav-min" style="width: 120px;">
        <div class="ul-nav-min-item">
          个人中心
        </div>
        <div class="ul-nav-min-item">
          安全中心
        </div>
        <div class="ul-nav-min-item">
          数据中心
        </div>
      </div>

    </div>
  </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
  <legend>经典头部跳转导航</legend>
  <div class="layui-field-box">
    <div class="ul-padding-md">
      <div class="ul-nav-header">
        <div class="ul-nav-header-main">

          <div class="ul-nav-header-left">
            <img style="height: 60px" src="{$site_logo_src}" alt="">
          </div>
          <div class="ul-nav-header-right">
            <div class="ul-nav-header-item">
              首页
            </div>
            <div class="ul-nav-header-item">
              活动中心
            </div>
            <div class="ul-nav-header-item">
              咨询
            </div>
            <div class="ul-nav-header-item">
              帮助指南
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ul-padding-md">
      <div class="ul-nav-header ul-nav-header-red">
        <div class="ul-nav-header-main">

          <div class="ul-nav-header-left">
            <img style="height: 60px" src="{$site_logo_src}" alt="">
          </div>
          <div class="ul-nav-header-right">
            <div class="ul-nav-header-item">
              首页
            </div>
            <div class="ul-nav-header-item">
              活动中心
            </div>
            <div class="ul-nav-header-item">
              咨询
            </div>
            <div class="ul-nav-header-item">
              帮助指南
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ul-padding-md">
      <div class="ul-nav-header ul-nav-header-primary">
        <div class="ul-nav-header-main">

          <div class="ul-nav-header-left">
            <img style="height: 80px" src="{$site_logo_src}" alt="">
          </div>
          <div class="ul-nav-header-right">
            <div class="ul-nav-header-item">
              首页
            </div>
            <div class="ul-nav-header-item">
              活动中心
            </div>
            <div class="ul-nav-header-item">
              咨询
            </div>
            <div class="ul-nav-header-item">
              帮助指南
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
  <legend>带图片和边框的导航</legend>
  <div class="layui-field-box">
    <div class="ul-nav-poster" style="width: 200px;">
      <div class="ul-nav-poster-item" data-repeat="6">
        <div class="ul-nav-poster-left">
          <div class="ul-nav-poster-img" style="background-image: url('{$site_logo_src}');">

          </div>
          <div class="ul-nav-post-title">
            国产专区
          </div>
        </div>
        <div class="ul-nav-poster-right">
          <div class="ul-nav-poster-desc">进入系统</div>
        </div>
      </div>
    </div>
  </div>
</fieldset>