ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-05 11:52:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

增加操作导航

Browse Source
This commit is contained in:
augushong
2021-09-24 19:58:20 +08:00
parent edc1461e27
commit f35b39c713
2 changed files with 342 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

579
demo/pc/nav.html
View File

@@ -1,320 +1,357 @@
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>银色垂直导航</legend> <legend>银色垂直导航</legend>
<div class="layui-field-box"> <div class="layui-field-box">
<ul class="layui-nav layui-nav-tree ul-nav-white"> <ul class="layui-nav layui-nav-tree ul-nav-white">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --> <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<li class="layui-nav-item layui-nav-itemed"> <li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a> <a href="javascript:;">默认展开</a>
<dl class="layui-nav-child"> <dl class="layui-nav-child">
<dd class="layui-this"><a href="javascript:;">选项1</a></dd> <dd class="layui-this"><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd> <dd><a href="javascript:;">选项2</a></dd>
<dd><a href="">跳转</a></dd> <dd><a href="">跳转</a></dd>
</dl> </dl>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<a href="javascript:;">解决方案</a> <a href="javascript:;">解决方案</a>
<dl class="layui-nav-child"> <dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd> <dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd> <dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd> <dd><a href="">电商平台</a></dd>
</dl> </dl>
</li> </li>
<li class="layui-nav-item layui-this"><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>
</ul> </ul>
</div> </div>
</fieldset> </fieldset>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>附带说明垂直导航</legend> <legend>附带说明垂直导航</legend>
<div class="layui-field-box"> <div class="layui-field-box">
<div class="ul-section"> <div class="ul-section">
<div class="ul-nav-tree ul-padding-md"> <div class="ul-nav-tree ul-padding-md">
<div class="ul-nav-tree-group"> <div class="ul-nav-tree-group">
<div class="ul-nav-tree-group-title">起步</div> <div class="ul-nav-tree-group-title">起步</div>
<div class="ul-nav-tree-group-main"> <div class="ul-nav-tree-group-main">
<a href="" class="ul-nav-tree-item current"> <a href="" class="ul-nav-tree-item current">
<div class="ul-nav-tree-item-title">欢迎</div> <div class="ul-nav-tree-item-title">欢迎</div>
<div class="ul-nav-tree-item-desc">项目介绍/使用说明</div> <div class="ul-nav-tree-item-desc">项目介绍/使用说明</div>
</a> </a>
<a href="" class="ul-nav-tree-item"> <a href="" class="ul-nav-tree-item">
<div class="ul-nav-tree-item-title">开始使用</div> <div class="ul-nav-tree-item-title">开始使用</div>
<div class="ul-nav-tree-item-desc">安装方式,注意事项</div> <div class="ul-nav-tree-item-desc">安装方式,注意事项</div>
</a> </a>
<a href="" class="ul-nav-tree-item"> <a href="" class="ul-nav-tree-item">
<div class="ul-nav-tree-item-title">如何使用</div> <div class="ul-nav-tree-item-title">如何使用</div>
<div class="ul-nav-tree-item-desc">复制组件</div> <div class="ul-nav-tree-item-desc">复制组件</div>
</a> </a>
</div> </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>
<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>
</div>
</fieldset> </fieldset>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>无底色简约导航</legend> <legend>无底色简约导航</legend>
<div class="layui-field-box"> <div class="layui-field-box">
<ul class="layui-nav layui-nav-tree ul-nav-easy" lay-filter="user-nav"> <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"><a href="">概况</a></li>
<li class="layui-nav-item layui-this"><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> <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> </ul>
</div> </div>
</fieldset> </fieldset>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>最简单的导航</legend> <legend>最简单的导航</legend>
<div class="layui-field-box"> <div class="layui-field-box">
<div class="ul-padding-md"> <div class="ul-padding-md">
<div class="ul-nav-min" style="width: 120px;"> <div class="ul-nav-min" style="width: 120px;">
<div class="ul-nav-min-item"> <div class="ul-nav-min-item">
个人中心 个人中心
</div> </div>
<div class="ul-nav-min-item"> <div class="ul-nav-min-item">
安全中心 安全中心
</div> </div>
<div class="ul-nav-min-item"> <div class="ul-nav-min-item">
数据中心 数据中心
</div> </div>
</div> </div>
</div>
</div> </div>
</div>
</fieldset> </fieldset>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>经典头部跳转导航</legend> <legend>经典头部跳转导航</legend>
<div class="layui-field-box"> <div class="layui-field-box">
<div class="ul-padding-md"> <div class="ul-padding-md">
<div class="ul-nav-header"> <div class="ul-nav-header">
<div class="ul-nav-header-main"> <div class="ul-nav-header-main">
<div class="ul-nav-header-left"> <div class="ul-nav-header-left">
<img style="height: 60px" src="{$site_logo_src}" alt=""> <img style="height: 60px" src="{$site_logo_src}" alt="">
</div> </div>
<div class="ul-nav-header-right"> <div class="ul-nav-header-right">
<div class="ul-nav-header-item"> <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-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> <div class="ul-nav-header ul-nav-header-red">
<div class="ul-padding-md"> <div class="ul-nav-header-main">
<div class="ul-nav-header ul-nav-header-red">
<div class="ul-nav-header-main">
<div class="ul-nav-header-left"> <div class="ul-nav-header-left">
<img style="height: 60px" src="{$site_logo_src}" alt=""> <img style="height: 60px" src="{$site_logo_src}" alt="">
</div> </div>
<div class="ul-nav-header-right"> <div class="ul-nav-header-right">
<div class="ul-nav-header-item"> <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-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> <div class="ul-nav-header ul-nav-header-primary">
<div class="ul-padding-md"> <div class="ul-nav-header-main">
<div class="ul-nav-header ul-nav-header-primary">
<div class="ul-nav-header-main">
<div class="ul-nav-header-left"> <div class="ul-nav-header-left">
<img style="height: 80px" src="{$site_logo_src}" alt=""> <img style="height: 80px" src="{$site_logo_src}" alt="">
</div> </div>
<div class="ul-nav-header-right"> <div class="ul-nav-header-right">
<div class="ul-nav-header-item"> <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-nav-header-item">
活动中心
</div>
<div class="ul-nav-header-item">
咨询
</div>
<div class="ul-nav-header-item">
帮助指南
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</fieldset> </fieldset>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>带图片和边框的导航</legend> <legend>带图片和边框的导航</legend>
<div class="layui-field-box"> <div class="layui-field-box">
<div class="ul-nav-poster" style="width: 200px;"> <div class="ul-nav-poster" style="width: 200px;">
<div class="ul-nav-poster-item" data-repeat="6"> <div class="ul-nav-poster-item" data-repeat="6">
<div class="ul-nav-poster-left"> <div class="ul-nav-poster-left">
<div class="ul-nav-poster-img" style="background-image: url('{$site_logo_src}');"> <div class="ul-nav-poster-img" style="background-image: url('{$site_logo_src}');">
</div> </div>
<div class="ul-nav-post-title"> <div class="ul-nav-post-title">
国产专区 国产专区
</div> </div>
</div>
<div class="ul-nav-poster-right">
<div class="ul-nav-poster-desc">进入系统</div>
</div>
</div>
</div> </div>
<div class="ul-nav-poster-right">
<div class="ul-nav-poster-desc">进入系统</div>
</div>
</div>
</div> </div>
</div>
</fieldset> </fieldset>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>简单地分割线导航</legend> <legend>简单地分割线导航</legend>
<div class="layui-field-box"> <div class="layui-field-box">
<div class="ul-nav-link"> <div class="ul-nav-link">
<a class="ul-nav-link-item" href="">导航1</a> <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="">那个导航2</a>
<a class="ul-nav-link-item" href="">这个导航3</a> <a class="ul-nav-link-item" href="">这个导航3</a>
<a class="ul-nav-link-item" href="">导航4</a> <a class="ul-nav-link-item" href="">导航4</a>
</div>
</div> </div>
</div>
</fieldset> </fieldset>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>简单二级导航</legend> <legend>简单二级导航</legend>
<div class="layui-field-box"> <div class="layui-field-box">
<div class="ul-nav-tree-2"> <div class="ul-nav-tree-2">
<div class="ul-nav-tree-2-group"> <div class="ul-nav-tree-2-group">
<div class="ul-nav-tree-2-group-title">账号管理</div> <div class="ul-nav-tree-2-group-title">账号管理</div>
<div class="ul-nav-tree-2-group-main"> <div class="ul-nav-tree-2-group-main">
<a href="" class="ul-nav-tree-2-item"> <a href="" class="ul-nav-tree-2-item">
<div class="ul-nav-tree-2-item-title">个人信息</div> <div class="ul-nav-tree-2-item-title">个人信息</div>
</a> </a>
<a href="" class="ul-nav-tree-2-item"> <a href="" class="ul-nav-tree-2-item">
<div class="ul-nav-tree-2-item-title">安全中心</div> <div class="ul-nav-tree-2-item-title">安全中心</div>
</a> </a>
<a href="" class="ul-nav-tree-2-item"> <a href="" class="ul-nav-tree-2-item">
<div class="ul-nav-tree-2-item-title">提现管理</div> <div class="ul-nav-tree-2-item-title">提现管理</div>
</a> </a>
</div> </div>
</div> </div>
<div class="ul-nav-tree-2-group"> <div class="ul-nav-tree-2-group">
<div class="ul-nav-tree-2-group-title">资金管理</div> <div class="ul-nav-tree-2-group-title">资金管理</div>
<div class="ul-nav-tree-2-group-main"> <div class="ul-nav-tree-2-group-main">
<a href="" class="ul-nav-tree-2-item"> <a href="" class="ul-nav-tree-2-item">
<div class="ul-nav-tree-2-item-title">余额宝</div> <div class="ul-nav-tree-2-item-title">余额宝</div>
</a> </a>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</fieldset> </fieldset>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>选项菜单导航</legend> <legend>选项菜单导航</legend>
<div class="layui-field-box"> <div class="layui-field-box">
<div class="ul-nav-card"> <div class="ul-nav-card">
<div class="ul-nav-card-item"> <div class="ul-nav-card-item">
<div class="ul-nav-card-item-left"> <div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set"> <div class="ul-nav-card-item-icon layui-icon layui-icon-set">
</div> </div>
<div class="ul-nav-card-item-info"> <div class="ul-nav-card-item-info">
<div class="ul-nav-card-item-title"> <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>
<div class="ul-nav-card-item-desc"> <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>
</div> <div class="ul-nav-card-item disabled">
</div> <div class="ul-nav-card-item-left">
<div class="ul-nav-card-item-right"> <div class="ul-nav-card-item-icon layui-icon layui-icon-set">
<div class="layui-btn layui-btn-sm">
修改密码 </div>
</div> <div class="ul-nav-card-item-info">
</div> <div class="ul-nav-card-item-title">
</div> 比特币转出
<div class="ul-nav-card-item"> </div>
<div class="ul-nav-card-item-left"> <div class="ul-nav-card-item-desc">
<div class="ul-nav-card-item-icon layui-icon layui-icon-set"> 系统维护,不能转出
</div>
</div> </div>
<div class="ul-nav-card-item-info"> </div>
<div class="ul-nav-card-item-title"> <div class="ul-nav-card-item-right">
资金密码 <div class="layui-btn layui-btn-sm layui-btn-disabled">
立即转出
</div>
</div>
</div> </div>
<div class="ul-nav-card-item-desc">
资金密码用于提现、绑定银行卡等操作，可保障资金安全
</div>
</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>
</div>
</fieldset> </fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>操作导航</legend>
<div class="layui-field-box">
<div class="ul-padding-md ul-bg-gray">
<div class="ul-nav-button">
<div class="ul-nav-button-item">
<div class="ul-nav-button-icon">
<i class="icon layui-icon layui-icon-add-circle"></i>
</div>
<div class="ul-nav-button-info">
<div class="ul-nav-button-title">
发布公告
</div>
<div class="ul-nav-button-desc">
发布文字/图片和视频.
</div>
</div>
</div>
<div class="ul-nav-button-item">
<div class="ul-nav-button-icon">
<i class="icon layui-icon layui-icon-about"></i>
</div>
<div class="ul-nav-button-info">
<div class="ul-nav-button-title">
关于
</div>
<div class="ul-nav-button-desc">
查看详细系统信息
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>

37
public/cdn/layui-ul.css
View File

@@ -1324,10 +1324,10 @@ body .layui-quote-gray {
margin-bottom : 15px; margin-bottom : 15px;
margin-right : 15px; margin-right : 15px;
cursor : pointer; cursor : pointer;
border: 1px solid transparent; border : 1px solid transparent;
} }
.ul-book-item:hover{ .ul-book-item:hover {
border-color: #ddd; border-color: #ddd;
} }
@@ -1378,5 +1378,36 @@ body .layui-quote-gray {
.ul-book-list.big .ul-book-info { .ul-book-list.big .ul-book-info {
height: 160px; height: 160px;
width: 110px; width : 110px;
}
.ul-nav-button-item {
display : flex;
align-items : center;
justify-content : flex-start;
margin-bottom : 10px;
border-radius : 8px;
padding : 10px;
box-shadow : 0px 1px 3px #bbb;
background-color: #fff;
}
.ul-nav-button-icon {
margin-right: 10px;
}
.ul-nav-button-icon .icon {
font-size: 38px;
color : #999;
}
.ul-nav-button-title {
color : #333;
font-size : 16px;
font-weight: 600;
}
.ul-nav-button-desc {
color : #666;
font-size: 14px;
} }