mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-01 10:32:49 +08:00
321 lines
11 KiB
HTML
321 lines
11 KiB
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>
|
|
<fieldset class="layui-elem-field layui-field-title">
|
|
<legend>简单地分割线导航</legend>
|
|
<div class="layui-field-box">
|
|
<div class="ul-nav-link">
|
|
<a class="ul-nav-link-item" href="">导航1</a>
|
|
<a class="ul-nav-link-item" href="">那个导航2</a>
|
|
<a class="ul-nav-link-item" href="">这个导航3</a>
|
|
<a class="ul-nav-link-item" href="">导航4</a>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="layui-elem-field layui-field-title">
|
|
<legend>简单二级导航</legend>
|
|
<div class="layui-field-box">
|
|
<div class="ul-nav-tree-2">
|
|
<div class="ul-nav-tree-2-group">
|
|
<div class="ul-nav-tree-2-group-title">账号管理</div>
|
|
<div class="ul-nav-tree-2-group-main">
|
|
<a href="" class="ul-nav-tree-2-item">
|
|
<div class="ul-nav-tree-2-item-title">个人信息</div>
|
|
</a>
|
|
<a href="" class="ul-nav-tree-2-item">
|
|
<div class="ul-nav-tree-2-item-title">安全中心</div>
|
|
</a>
|
|
<a href="" class="ul-nav-tree-2-item">
|
|
<div class="ul-nav-tree-2-item-title">提现管理</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ul-nav-tree-2-group">
|
|
<div class="ul-nav-tree-2-group-title">资金管理</div>
|
|
<div class="ul-nav-tree-2-group-main">
|
|
<a href="" class="ul-nav-tree-2-item">
|
|
<div class="ul-nav-tree-2-item-title">余额宝</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset class="layui-elem-field layui-field-title">
|
|
<legend>选项菜单导航</legend>
|
|
<div class="layui-field-box">
|
|
<div class="ul-nav-card">
|
|
<div class="ul-nav-card-item">
|
|
<div class="ul-nav-card-item-left">
|
|
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
|
|
|
|
</div>
|
|
<div class="ul-nav-card-item-info">
|
|
<div class="ul-nav-card-item-title">
|
|
登录密码
|
|
</div>
|
|
<div class="ul-nav-card-item-desc">
|
|
建议您使用字母和数字的组合、混合大小写、在组合中加入下划线等符号。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ul-nav-card-item-right">
|
|
<div class="layui-btn layui-btn-sm">
|
|
修改密码
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ul-nav-card-item">
|
|
<div class="ul-nav-card-item-left">
|
|
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
|
|
|
|
</div>
|
|
<div class="ul-nav-card-item-info">
|
|
<div class="ul-nav-card-item-title">
|
|
资金密码
|
|
</div>
|
|
<div class="ul-nav-card-item-desc">
|
|
资金密码用于提现、绑定银行卡等操作,可保障资金安全
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ul-nav-card-item-right">
|
|
<div class="layui-btn layui-btn-sm">
|
|
找回资金密码
|
|
</div>
|
|
<div class="layui-btn layui-btn-sm">
|
|
修改资金密码
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ul-nav-card-item disabled">
|
|
<div class="ul-nav-card-item-left">
|
|
<div class="ul-nav-card-item-icon layui-icon layui-icon-set">
|
|
|
|
</div>
|
|
<div class="ul-nav-card-item-info">
|
|
<div class="ul-nav-card-item-title">
|
|
比特币转出
|
|
</div>
|
|
<div class="ul-nav-card-item-desc">
|
|
系统维护,不能转出
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ul-nav-card-item-right">
|
|
<div class="layui-btn layui-btn-sm layui-btn-disabled">
|
|
立即转出
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|