增加多级导航栏，增加水平/垂直导航栏配置，可通过菜单元数据参数(#374)
增加多级导航栏，增加水平/垂直导航栏配置，可通过菜单元数据参数：isVertical(1:垂直，0或者不设置则为水平)
This commit is contained in:
石头君
GitHub
parent
ed22bce9ae
commit
0c05e453ef
|
|
@ -10,7 +10,15 @@ spec:
|
|||
- $formkit: "text"
|
||||
name: "icon"
|
||||
label: "图标"
|
||||
|
||||
- $formkit: "radio"
|
||||
name: "isVertical"
|
||||
value: 0
|
||||
label: "该菜单的子菜单是否为垂直菜单"
|
||||
options:
|
||||
- label: 是
|
||||
value: 1
|
||||
- label: 否
|
||||
value: 0
|
||||
---
|
||||
|
||||
apiVersion: v1alpha1
|
||||
|
|
|
|||
|
|
@ -2960,7 +2960,8 @@ blockquote footer cite::before {
|
|||
padding: 0px 0.4rem 0px 0px;
|
||||
}
|
||||
|
||||
#nav .menus_items .menus_item:hover .menus_item_child {
|
||||
#nav .menus_items .recursion_menus_item:hover > .menus_item_child,
|
||||
#nav .menus_items .menus_item:hover > .menus_item_child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -2994,6 +2995,10 @@ blockquote footer cite::before {
|
|||
content: "";
|
||||
}
|
||||
|
||||
#nav .menus_items .menus_item .recursion_menus_item > .menus_item_child{
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
#nav.hide-menu #toggle-menu {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
|
@ -5371,6 +5376,10 @@ html {
|
|||
top: -10px;
|
||||
}
|
||||
|
||||
#nav .menus_items .menus_item .recursion_menus_item > .menus_item_child:before {
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
/* #menus > div.menus_items > div:nth-child(1) > ul{
|
||||
right: -200px!important;
|
||||
}
|
||||
|
|
@ -5387,16 +5396,16 @@ html {
|
|||
right: -200px!important;
|
||||
} */
|
||||
|
||||
#nav .menus_items .menus_item .menus_item_child li a:hover {
|
||||
#nav .menus_items .menus_item .menus_item_child > .recursion_menus_item:hover > a {
|
||||
background: var(--heo-main) !important;
|
||||
color: var(--heo-white) !important;
|
||||
box-shadow: var(--heo-shadow-main);
|
||||
margin: 0 auto;
|
||||
transform: scale(1) !important;
|
||||
padding: 0.3rem 0.7rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
|
||||
#nav .menus_items .menus_item .menus_item_child li a i:not(.fa-brands) {
|
||||
#nav .menus_items .menus_item .menus_item_child > .recursion_menus_item a i:not(.fa-brands) {
|
||||
font-size: 1rem;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
|
@ -5409,13 +5418,65 @@ html {
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
#nav .menus_items .menus_item .menus_item_child li {
|
||||
#nav .menus_items .menus_item .menus_item_child > .recursion_menus_item {
|
||||
display: inline-flex;
|
||||
list-style: none;
|
||||
border-radius: 5px;
|
||||
margin: 0 4px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/*---------竖向菜单--------*/
|
||||
#nav .menus_items .menus_item .menus_item_child.vertical_nav > .recursion_menus_item {
|
||||
display: inline-flex;
|
||||
list-style: none;
|
||||
border-radius: 5px;
|
||||
margin: 0 4px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
/**
|
||||
上级菜单为横向菜单时
|
||||
*/
|
||||
|
||||
|
||||
/*-------本菜单竖向菜单时------*/
|
||||
/* 第三级之后的菜单列 */
|
||||
#nav .menus_items .menus_item .menus_item_child > .recursion_menus_item > .menus_item_child.vertical_nav{
|
||||
margin-top: 24px;
|
||||
border-radius: 24px;
|
||||
padding: 2px 0px;
|
||||
}
|
||||
/* 第三级之后的菜单项 */
|
||||
#nav .menus_items .recursion_menus_item .menus_item_child.vertical_nav > .recursion_menus_item{
|
||||
display: flex;
|
||||
margin-top: 4px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
/* 第三级之后的菜单项（第一个菜单项） */
|
||||
#nav .menus_items .recursion_menus_item .menus_item_child.vertical_nav > .recursion_menus_item:nth-child(1){
|
||||
margin-top: 0;
|
||||
}
|
||||
/*-------本菜单竖向菜单时END------*/
|
||||
|
||||
/*-------上级菜单为竖向菜单时------*/
|
||||
/*第四级以后的菜单列*/
|
||||
#nav .menus_items .recursion_menus_item > .menus_item_child.vertical_nav > .recursion_menus_item > .menus_item_child{
|
||||
position: absolute;
|
||||
left: calc(100% + 12px);
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
#nav .menus_items .recursion_menus_item > .menus_item_child.vertical_nav > .recursion_menus_item > .menus_item_child:before{
|
||||
left: -20px;
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
top: 0;
|
||||
}
|
||||
/*-------上级菜单为竖向菜单时END------*/
|
||||
|
||||
/* 导航栏按钮悬浮 */
|
||||
#nav a {
|
||||
border-radius: 8px;
|
||||
|
|
@ -6873,12 +6934,12 @@ img.footer_mini_logo:hover {
|
|||
border-radius: 40px;
|
||||
}
|
||||
|
||||
#nav .menus_items .menus_item .menus_item_child li a {
|
||||
#nav .menus_items .menus_item .menus_item_child > .recursion_menus_item > a {
|
||||
letter-spacing: 0rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 100px;
|
||||
padding: 0.3rem 1rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
width: 100%;
|
||||
color: var(--heo-fontcolor) !important;
|
||||
text-shadow: none !important;
|
||||
|
|
@ -17596,7 +17657,7 @@ code:not([class]) {
|
|||
padding: 2px 2px 4px 2px;
|
||||
border-radius: 55px;
|
||||
}
|
||||
#nav .menus_items .menus_item .menus_item_child li a:hover {
|
||||
#nav .menus_items .menus_item .menus_item_child > .recursion_menus_item:hover > a {
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
.postcarnepre{
|
||||
|
|
|
|||
|
|
@ -1,8 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
|
||||
|
||||
<th:block th:fragment="nav-menu-recursion(menuItem)">
|
||||
<!-- 有子菜单则显示子菜单 -->
|
||||
<th:block th:if="${not #lists.isEmpty(menuItem.children)}">
|
||||
<!-- 子菜单 -->
|
||||
<div class="menus_item_child" th:classappend="${#annotations.get(menuItem,'isVertical')=='1'?'vertical_nav':''}">
|
||||
<div class="recursion_menus_item" th:each="childMenu : ${menuItem.children}">
|
||||
<a class="site-page child" th:target="${childMenu.spec.target?.value}" th:href="@{${childMenu.status.href}}">
|
||||
<i th:if="${!#strings.isEmpty(#annotations.getOrDefault(childMenu, 'icon', ''))}"
|
||||
th:class="${#annotations.getOrDefault(childMenu, 'icon', '')}"
|
||||
style="font-size:.9em"></i>
|
||||
<span th:text="${childMenu.status.displayName}"></span>
|
||||
</a>
|
||||
<!--递归调用-->
|
||||
<div th:replace="~{modules/widgets/nav-menu :: nav-menu-recursion(menuItem=${childMenu})}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
</th:block>
|
||||
|
||||
<!-- 导航栏菜单栏 -->
|
||||
<div id="menus" th:fragment="nav-menu">
|
||||
|
||||
<div class="menus_items">
|
||||
|
||||
<!-- 第一层仅展示使用，不做跳转 -->
|
||||
|
|
@ -19,22 +40,8 @@
|
|||
<a th:if="${not #lists.isEmpty(menuItem.children)}" class="site-page" rel="external nofollow">
|
||||
<span th:text="${menuItem.status.displayName}"></span>
|
||||
</a>
|
||||
|
||||
<!-- 有子菜单则显示子菜单 -->
|
||||
<th:block th:if="${not #lists.isEmpty(menuItem.children)}">
|
||||
<!-- 子菜单 -->
|
||||
<ul class="menus_item_child">
|
||||
<li th:each="childMenu : ${menuItem.children}">
|
||||
<a class="site-page child" th:target="${childMenu.spec.target?.value}" th:href="@{${childMenu.status.href}}">
|
||||
<i th:if="${!#strings.isEmpty(#annotations.getOrDefault(childMenu, 'icon', ''))}"
|
||||
th:class="${#annotations.getOrDefault(childMenu, 'icon', '')}"
|
||||
style="font-size:.9em"></i>
|
||||
<span th:text="${childMenu.status.displayName}"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</th:block>
|
||||
|
||||
<!--递归调用-->
|
||||
<div th:replace="~{modules/widgets/nav-menu :: nav-menu-recursion(menuItem=${menuItem})}"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue