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

新增导航组件

Browse Source
This commit is contained in:
augushong
2021-03-29 13:07:22 +08:00
parent 93be540b54
commit 50518ff011
3 changed files with 59 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
demo/nav.html
View File

@@ -1,5 +1,5 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>一般垂直导航</legend>
<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"> -->
@@ -23,4 +23,50 @@
<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>

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

@@ -1,6 +1,6 @@
/* 列表开始 */
.ul-nav-tree {
border-right: 1px solid #bbb;
}
.ul-nav-tree-group-title{
@@ -17,6 +17,10 @@
white-space: nowrap;
}
.ul-nav-tree-item.current .ul-nav-tree-item-title{
color: #6cf;
}
.ul-nav-tree-item-title {
font-size: 15px;
@@ -48,6 +52,10 @@
background-position: center;
}
.ul-border-right{
border-right: 1px solid #bbb;
}
/* 通用类结束 */
/* 用户头像开始 */

6
view/index/index/index.html
View File

@@ -28,8 +28,8 @@
</div>
</div>
<div class="layui-row layui-col-space6 " style="margin-top: 15px;">
<div class="layui-col-md3">
<div class="ul-nav-tree ul-padding-md">
<div class="layui-col-md3 ul-border-right">
<div class="ul-nav-tree ul-padding-md ">
{volist name='list_post' id='category'}
<div class="ul-nav-tree-group">
@@ -38,7 +38,7 @@
</div>
<div class="ul-nav-tree-group-main">
{volist name='category.post' id='post'}
<a href="{:url('Index/index',['post_id'=>$post.id])}" class="ul-nav-tree-item">
<a href="{:url('Index/index',['post_id'=>$post.id])}" class="ul-nav-tree-item {eq name='post.id' value='$Request.param.post_id'}current{/eq}">
<div class="ul-nav-tree-item-title">
{$post.title}
</div>