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

feat: 迁移经典头部跳转导航

Browse Source
This commit is contained in:
augushong
2025-09-01 12:33:49 +08:00
parent 68d4e35c54
commit 75de7e4d51
10 changed files with 193 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
demo/pc/nav.html
View File

@@ -1,80 +1,3 @@
<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"> <fieldset class="layui-elem-field layui-field-title">
<legend>带图片和边框的导航</legend> <legend>带图片和边框的导航</legend>
<div class="layui-field-box"> <div class="layui-field-box">

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

@@ -2568,6 +2568,54 @@
padding: 12px; padding: 12px;
} }
.ul-nav-header-main {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 15px;
margin: 0 auto;
}
.ul-nav-header-right {
text-align: right;
}
.ul-nav-header-item {
display: inline-block;
margin-right: 15px;
cursor: pointer;
padding: 5px 15px;
color: #333;
}
.ul-nav-header-item:hover {
color: #6cf;
}
.ul-nav-header-red {
background-color: #f72222;
}
.ul-nav-header-red .ul-nav-header-item {
color: #fff;
}
.ul-nav-header-red .ul-nav-header-item:hover {
color: #fedf50;
}
.ul-nav-header-primary {
background-color: #6cf;
}
.ul-nav-header-primary .ul-nav-header-item {
color: #fff;
}
.ul-nav-header-primary .ul-nav-header-item:hover {
color: #ccffff;
}
.ul-nav-info__item { .ul-nav-info__item {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -2959,54 +3007,6 @@
text-align: left; text-align: left;
} }
.ul-nav-header-main {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 15px;
margin: 0 auto;
}
.ul-nav-header-right {
text-align: right;
}
.ul-nav-header-item {
display: inline-block;
margin-right: 15px;
cursor: pointer;
padding: 5px 15px;
color: #333;
}
.ul-nav-header-item:hover {
color: #6cf;
}
.ul-nav-header-red {
background-color: #f72222;
}
.ul-nav-header-red .ul-nav-header-item {
color: #fff;
}
.ul-nav-header-red .ul-nav-header-item:hover {
color: #fedf50;
}
.ul-nav-header-primary {
background-color: #6cf;
}
.ul-nav-header-primary .ul-nav-header-item {
color: #fff;
}
.ul-nav-header-primary .ul-nav-header-item:hover {
color: #ccffff;
}
.ul-card-a { .ul-card-a {
width: 180px; width: 180px;
display: flex; display: flex;

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

File diff suppressed because one or more lines are too long

1
source/components/_index.scss
View File

@@ -47,6 +47,7 @@
@import './nav/ul-nav-block/index'; @import './nav/ul-nav-block/index';
@import './nav/ul-nav-easy/index'; @import './nav/ul-nav-easy/index';
@import './nav/ul-nav-grid/index'; @import './nav/ul-nav-grid/index';
@import './nav/ul-nav-header/index';
@import './nav/ul-nav-info/index'; @import './nav/ul-nav-info/index';
@import './nav/ul-nav-min/index'; @import './nav/ul-nav-min/index';
@import './nav/ul-nav-tree/index'; @import './nav/ul-nav-tree/index';

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

@@ -0,0 +1,6 @@
title=经典头部跳转导航
padding=0
margin=0
gray=0
mobile=0
inner_margin=0

84
source/components/nav/ul-nav-header/_index.html Normal file
View File

@@ -0,0 +1,84 @@
<div class="ul-section">
<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-section">
<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-section">
<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>

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

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

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

48
source/components/nav/ul-nav-header/_index.scss Normal file
View File

@@ -0,0 +1,48 @@
.ul-nav-header-main {
display : flex;
align-items : center;
justify-content: space-between;
padding : 5px 15px;
margin : 0 auto;
}
.ul-nav-header-right {
text-align: right;
}
.ul-nav-header-item {
display : inline-block;
margin-right: 15px;
cursor : pointer;
padding : 5px 15px;
color : #333;
}
.ul-nav-header-item:hover {
color: #6cf;
}
.ul-nav-header-red {
background-color: #f72222;
}
.ul-nav-header-red .ul-nav-header-item {
color: #fff;
}
.ul-nav-header-red .ul-nav-header-item:hover {
color: #fedf50;
}
.ul-nav-header-primary {
background-color: #6cf;
}
.ul-nav-header-primary .ul-nav-header-item {
color: #fff;
}
.ul-nav-header-primary .ul-nav-header-item:hover {
color: #ccffff;
}

47
source/scss/layui-ul.scss
View File

@@ -156,53 +156,6 @@
} }
.ul-nav-header-main {
display : flex;
align-items : center;
justify-content: space-between;
padding : 5px 15px;
margin : 0 auto;
}
.ul-nav-header-right {
text-align: right;
}
.ul-nav-header-item {
display : inline-block;
margin-right: 15px;
cursor : pointer;
padding : 5px 15px;
color : #333;
}
.ul-nav-header-item:hover {
color: #6cf;
}
.ul-nav-header-red {
background-color: #f72222;
}
.ul-nav-header-red .ul-nav-header-item {
color: #fff;
}
.ul-nav-header-red .ul-nav-header-item:hover {
color: #fedf50;
}
.ul-nav-header-primary {
background-color: #6cf;
}
.ul-nav-header-primary .ul-nav-header-item {
color: #fff;
}
.ul-nav-header-primary .ul-nav-header-item:hover {
color: #ccffff;
}
.ul-card-a { .ul-card-a {
width : 180px; width : 180px;