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

新增无底色简约导航

Browse Source
This commit is contained in:
augushong
2021-03-31 11:39:39 +08:00
parent fd411bda6b
commit ba25c83961
2 changed files with 59 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
demo/nav.html
View File

@@ -70,3 +70,19 @@
</div> </div>
</div> </div>
</fieldset> </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>

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

@@ -387,14 +387,17 @@
.ul-message-item-right { .ul-message-item-right {
width: calc(100% - 120px); width: calc(100% - 120px);
} }
.ul-message-item-info{
.ul-message-item-info {
position: relative; position: relative;
} }
.ul-message-item-options{
.ul-message-item-options {
position: absolute; position: absolute;
right: 0; right : 0;
top: 0; top : 0;
} }
.ul-message-item-avatar { .ul-message-item-avatar {
background-size : cover; background-size : cover;
background-position: center; background-position: center;
@@ -422,7 +425,7 @@
margin-top : 10px; margin-top : 10px;
} }
.ul-message-item-img-list{ .ul-message-item-img-list {
margin-top: 10px; margin-top: 10px;
@@ -433,7 +436,36 @@
height : 120px; height : 120px;
background-size : cover; background-size : cover;
background-position: center; background-position: center;
margin-right: 10px; margin-right : 10px;
display: inline-block; display : inline-block;
} }
.ul-nav-easy {
background-color: transparent;
}
.layui-nav-tree.ul-nav-easy .layui-nav-item>a {
color: #666;
}
.layui-nav-tree.ul-nav-easy .layui-this {
background-color: transparent;
}
.layui-nav-tree.ul-nav-easy .layui-this>a {
background-color: transparent;
color : #6cf;
}
.layui-nav-tree.ul-nav-easy .layui-nav-item.layui-this a:hover{
color: #6cf;
}
.layui-nav-tree.ul-nav-easy .layui-nav-item a:hover {
color: #fff;
}
.layui-nav-tree.ul-nav-easy .layui-nav-item a {
height : 45px;
line-height: 45px;
}