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

feat: 迁移银色垂直导航

Browse Source
This commit is contained in:
augushong
2025-09-01 12:25:58 +08:00
parent 9178287e44
commit 7f85b125c6
10 changed files with 126 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
demo/pc/nav.html
View File

@@ -1,30 +1,3 @@
<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">

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

@@ -201,51 +201,6 @@
border: unset;
}
/* 头部结束 */
/* 导航开始 */
.layui-nav.ul-nav-white {
background-color: #f0f0f0;
}
.layui-nav.ul-nav-white .layui-nav-child a {
color: #666;
}
.layui-nav.ul-nav-white .layui-nav-item a {
color: #666;
}
.layui-nav.ul-nav-white .layui-nav-itemed > .layui-nav-child {
background-color: rgba(255, 255, 255, 0.6) !important;
padding-left: 15px;
min-width: calc(100% - 15px) !important;
}
.layui-nav-tree.ul-nav-white .layui-nav-item a:hover {
background-color: #9cf;
color: #fff !important;
}
.layui-nav.ul-nav-white .layui-nav-itemed > a,
.layui-nav-tree.ul-nav-white .layui-nav-title a,
.layui-nav-tree.ul-nav-white .layui-nav-title a:hover {
color: #666 !important;
}
.layui-nav-tree.ul-nav-white .layui-nav-bar {
background-color: #6cf;
}
.layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this,
.layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this a,
.layui-nav-tree.ul-nav-white .layui-this,
.layui-nav-tree.ul-nav-white .layui-this > a,
.layui-nav-tree.ul-nav-white .layui-this > a:hover {
background-color: #9cf;
color: #fff;
}
/* 导航结束 */
/* 简约风格Form */
.ul-form-basic .layui-form-item {
clear: unset;
@@ -1554,6 +1509,51 @@
color: #fff;
}
/* 头部结束 */
/* 导航开始 */
.layui-nav.ul-nav-white {
background-color: #f0f0f0;
}
.layui-nav.ul-nav-white .layui-nav-child a {
color: #666;
}
.layui-nav.ul-nav-white .layui-nav-item a {
color: #666;
}
.layui-nav.ul-nav-white .layui-nav-itemed > .layui-nav-child {
background-color: rgba(255, 255, 255, 0.6) !important;
padding-left: 15px;
min-width: calc(100% - 15px) !important;
}
.layui-nav-tree.ul-nav-white .layui-nav-item a:hover {
background-color: #9cf;
color: #fff !important;
}
.layui-nav.ul-nav-white .layui-nav-itemed > a,
.layui-nav-tree.ul-nav-white .layui-nav-title a,
.layui-nav-tree.ul-nav-white .layui-nav-title a:hover {
color: #666 !important;
}
.layui-nav-tree.ul-nav-white .layui-nav-bar {
background-color: #6cf;
}
.layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this,
.layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this a,
.layui-nav-tree.ul-nav-white .layui-this,
.layui-nav-tree.ul-nav-white .layui-this > a,
.layui-nav-tree.ul-nav-white .layui-this > a:hover {
background-color: #9cf;
color: #fff;
}
/* 导航结束 */
.ul-shop-header {
padding: 15px;
}
@@ -2671,6 +2671,51 @@
word-wrap: anywhere;
}
/* 头部结束 */
/* 导航开始 */
.layui-nav.ul-nav-white {
background-color: #f0f0f0;
}
.layui-nav.ul-nav-white .layui-nav-child a {
color: #666;
}
.layui-nav.ul-nav-white .layui-nav-item a {
color: #666;
}
.layui-nav.ul-nav-white .layui-nav-itemed > .layui-nav-child {
background-color: rgba(255, 255, 255, 0.6) !important;
padding-left: 15px;
min-width: calc(100% - 15px) !important;
}
.layui-nav-tree.ul-nav-white .layui-nav-item a:hover {
background-color: #9cf;
color: #fff !important;
}
.layui-nav.ul-nav-white .layui-nav-itemed > a,
.layui-nav-tree.ul-nav-white .layui-nav-title a,
.layui-nav-tree.ul-nav-white .layui-nav-title a:hover {
color: #666 !important;
}
.layui-nav-tree.ul-nav-white .layui-nav-bar {
background-color: #6cf;
}
.layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this,
.layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this a,
.layui-nav-tree.ul-nav-white .layui-this,
.layui-nav-tree.ul-nav-white .layui-this > a,
.layui-nav-tree.ul-nav-white .layui-this > a:hover {
background-color: #9cf;
color: #fff;
}
/* 导航结束 */
.ul-upload-photo-item {
display: inline-block;
width: 120px;

2
public/cdn/layui-ul.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
source/components/_index.scss
View File

@@ -24,6 +24,7 @@
@import './header/ul-header/index';
@import './header/ul-header-a/index';
@import './header/ul-header-shape/index';
@import './nav/ul-nav-white/index';
@import './header/ul-shop-header/index';
@import './list/ul-ad-list/index';
@import './list/ul-avatar-list/index';
@@ -48,6 +49,7 @@
@import './nav/ul-nav-grid/index';
@import './nav/ul-nav-info/index';
@import './nav/ul-nav-tree-2/index';
@import './nav/ul-nav-white/index';
@import './photo/ul-upload-photo-list/index';
@import './title/ul-group-title/index';
@import './title/ul-group-title-2/index';

6
source/components/nav/ul-nav-white/_index.env Normal file
View File

@@ -0,0 +1,6 @@
title=银色垂直导航
padding=0
margin=0
gray=0
mobile=0
inner_margin=0

21
source/components/nav/ul-nav-white/_index.html Normal file
View File

@@ -0,0 +1,21 @@
<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>

0
source/components/nav/ul-nav-white/_index.md Normal file
View File

5
source/components/nav/ul-nav-white/_index.php Normal file
View File

@@ -0,0 +1,5 @@
<?php
return [
];

0
source/scss/nav/_ul-nav-white.scss → source/components/nav/ul-nav-white/_index.scss
View File

3
source/scss/nav/_index.scss
View File

@@ -1,3 +1,2 @@
@import './ul-nav-tree';
@import './ul-nav-card-simple';
@import './ul-nav-white';
@import './ul-nav-card-simple';