Modify the menu style and add a submenu.
This commit is contained in:
parent
e6c48e067d
commit
ef0f2cab81
@ -83,7 +83,7 @@ h6,
|
||||
}
|
||||
|
||||
#header.header-scrolled {
|
||||
background: none;
|
||||
background: #ffffffc9;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
@ -121,14 +121,19 @@ h6,
|
||||
*/
|
||||
.navbar {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar ul {
|
||||
margin: 0;
|
||||
.navbar > ul.navbar-nav {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.navbar li {
|
||||
@ -139,8 +144,8 @@ h6,
|
||||
.navbar a:focus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0 10px 30px;
|
||||
justify-content: center;
|
||||
padding: 15px 25px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
@ -148,13 +153,6 @@ h6,
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.navbar a i,
|
||||
.navbar a:focus i {
|
||||
font-size: 12px;
|
||||
line-height: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.navbar a:hover,
|
||||
.navbar .active,
|
||||
.navbar .active:focus,
|
||||
@ -162,71 +160,138 @@ h6,
|
||||
color: #34C5DD;
|
||||
}
|
||||
|
||||
.navbar .dropdown ul {
|
||||
display: block;
|
||||
/* 下拉菜单样式 - 铺满屏幕宽度 */
|
||||
.navbar .dropdown-menu {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: calc(100% + 30px);
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
z-index: 99;
|
||||
left: 50%; /* 关键修改：从左侧50%位置开始 */
|
||||
transform: translateX(-40%); /* 关键修改：向左回退50%自身宽度 */
|
||||
top: 100%;
|
||||
width: 50%; /* 改为自动宽度 */
|
||||
min-width: 600px; /* 设置最小宽度 */
|
||||
display: block; /* 改为block布局 */
|
||||
background: #fff;
|
||||
padding: 15px 0;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
|
||||
transition: 0.3s;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar .dropdown ul li {
|
||||
min-width: 200px;
|
||||
/* 下拉菜单容器 */
|
||||
.navbar .dropdown-menu > ul {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.navbar .dropdown ul a {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
text-transform: none;
|
||||
color: #1c3745;
|
||||
/* 下拉菜单项 */
|
||||
.navbar .dropdown-menu li {
|
||||
text-align: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.navbar .dropdown ul a i {
|
||||
font-size: 12px;
|
||||
/* 修改这里：二级菜单链接始终显示下划线 */
|
||||
.navbar .dropdown-menu a {
|
||||
padding: 8px 5px;
|
||||
display: block;
|
||||
color: #333;
|
||||
text-decoration: underline; /* 始终显示下划线 */
|
||||
text-underline-offset: 10px; /* 下划线距离文字的距离 */
|
||||
text-decoration-color: rgba(0, 0, 0, 0.3); /* 下划线颜色稍浅 */
|
||||
white-space: normal;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.navbar .dropdown ul a:hover,
|
||||
.navbar .dropdown ul .active:hover,
|
||||
.navbar .dropdown ul li:hover>a {
|
||||
color: #68A4C4;
|
||||
/* 悬停时下划线颜色加深 */
|
||||
.navbar .dropdown-menu a:hover {
|
||||
color: #007bff;
|
||||
text-decoration-color: #007bff; /* 悬停时下划线颜色变深 */
|
||||
}
|
||||
|
||||
.navbar .dropdown:hover>ul {
|
||||
.navbar .nav-item:hover .dropdown-menu {
|
||||
opacity: 1;
|
||||
top: 100%;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.navbar .dropdown .dropdown ul {
|
||||
top: 0;
|
||||
left: calc(100% - 30px);
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.navbar .dropdown .dropdown:hover>ul {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media (max-width: 1366px) {
|
||||
.navbar .dropdown .dropdown ul {
|
||||
left: -90%;
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.navbar > ul.navbar-nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.navbar .dropdown .dropdown:hover>ul {
|
||||
left: -100%;
|
||||
|
||||
.navbar .dropdown-menu {
|
||||
position: static;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar .nav-item:hover .dropdown-menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navbar .dropdown-menu > ul {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 移动端下划线样式 */
|
||||
.navbar .dropdown-menu a {
|
||||
text-underline-offset: 3px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav > li > .dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 原有样式保持不变，添加以下新样式 */
|
||||
|
||||
/* 三级菜单容器 */
|
||||
.navbar .dropdown-submenu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 三级菜单链接样式 - 移除了下划线 */
|
||||
.navbar .dropdown-menu .third-level a {
|
||||
padding: 8px 15px 8px 1px; /* 增加左边距表示层级 */
|
||||
color: #666;
|
||||
text-decoration: none; /* 移除了下划线 */
|
||||
}
|
||||
|
||||
/* 三级菜单悬停效果 */
|
||||
.navbar .dropdown-menu .third-level a:hover {
|
||||
color: #007bff;
|
||||
text-decoration: none; /* 确保悬停时也没有下划线 */
|
||||
background-color: rgba(0, 0, 0, 0.05); /* 添加轻微背景色变化 */
|
||||
}
|
||||
|
||||
/* 三级菜单链接样式 */
|
||||
.navbar .dropdown-menu.third-level a {
|
||||
padding: 8px 15px 8px 30px; /* 增加左边距表示层级 */
|
||||
color: #666;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
text-decoration-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 响应式设计 - 移动端 */
|
||||
@media (max-width: 768px) {
|
||||
.navbar .dropdown-menu.third-level {
|
||||
padding-left: 20px; /* 移动端增加缩进 */
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.navbar .dropdown-menu.third-level a {
|
||||
padding-left: 40px; /* 更大的缩进 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Mobile Navigation
|
||||
*/
|
||||
|
||||
@ -15,49 +15,7 @@
|
||||
<!-- 预加载 logo 图片（如果有） -->
|
||||
<link th:unless="${#strings.isEmpty(site.logo)}" rel="preload" th:href="${site.logo}" as="image">
|
||||
</div>
|
||||
|
||||
<nav id="navbar" class="navbar" th:if="${theme.config.common_style.show_menu}">
|
||||
<ul>
|
||||
<li><a th:class="${page=='home'}" href="/">首页</a></li>
|
||||
<li><a th:if="${theme.config.about.show}"
|
||||
th:with="about = ${singlePageFinder.getByName(theme.config.about.page)}"
|
||||
th:class="${page==about.spec.slug} ? 'active' : '' " th:href="@{'/' + ${about.spec.slug}}"
|
||||
th:text="${about.spec.title}"></a></li>
|
||||
<li><a th:if="${theme.config.service.show}"
|
||||
th:with="service = ${singlePageFinder.getByName(theme.config.service.page)}"
|
||||
th:class="${page==service.spec.slug} ? 'active' : '' " th:href="@{'/' + ${service.spec.slug}}"
|
||||
th:text="${service.spec.title}"></a></li>
|
||||
<li><a th:if="${theme.config.team.show}" th:with="team = ${singlePageFinder.getByName(theme.config.team.page)}"
|
||||
th:class="${page==team.spec.slug} ? 'active' : '' " th:href="@{'/' + ${team.spec.slug}}"
|
||||
th:text="${team.spec.title}"></a></li>
|
||||
<li><a th:if="${theme.config.blog.show}"
|
||||
th:with="blog = ${singlePageFinder.getByName(theme.config.blog.page)}"
|
||||
th:class="${page==blog.spec.slug} ? 'active' : '' " th:href="@{'/' + ${blog.spec.slug}}"
|
||||
th:text="${blog.spec.title}"></a></li>
|
||||
<li><a th:if="${theme.config.contact.show}"
|
||||
th:with="contact = ${singlePageFinder.getByName(theme.config.contact.page)}"
|
||||
th:class="${page==contact.spec.slug} ? 'active' : '' " th:href="@{'/' + ${contact.spec.slug}}"
|
||||
th:text="${contact.spec.title}"></a></li>
|
||||
<th:block th:if="${not #strings.isEmpty(theme.config.common_style.extra_menu)}"
|
||||
th:with="menus=${menuFinder.getByName(theme.config.common_style.extra_menu)}">
|
||||
<li th:each="menu : ${menus.menuItems}" th:class="${#arrays.isEmpty(menu.spec.children)} ? '' : 'dropdown'">
|
||||
<a th:if="${#arrays.isEmpty(menu.spec.children)}" target="_blank" th:href="@{${menu.status.href}}"
|
||||
th:text="${menu.status.displayName}"></a>
|
||||
<th:block th:if="${not #arrays.isEmpty(menu.spec.children)}">
|
||||
<a href="#">
|
||||
<span th:text="${menu.spec.displayName}"></span>
|
||||
<i class="bi bi-chevron-down"></i>
|
||||
</a>
|
||||
<ul>
|
||||
<th:block th:each="child : ${menu.children}">
|
||||
<li><a th:href="${child.status.href}" target="_blank" th:text="${child.status.displayName}"></a></li>
|
||||
</th:block>
|
||||
</ul>
|
||||
</th:block>
|
||||
</li>
|
||||
</th:block>
|
||||
</ul>
|
||||
<i class="bi bi-list mobile-nav-toggle"></i>
|
||||
</nav>
|
||||
|
||||
<nav th:replace="modules/navbar.html"></nav>
|
||||
</div>
|
||||
</header>
|
||||
42
templates/modules/navbar.html
Normal file
42
templates/modules/navbar.html
Normal file
@ -0,0 +1,42 @@
|
||||
<nav class="navbar" th:with="menu = ${menuFinder?.getPrimary()}">
|
||||
<ul class="navbar-nav d-flex flex-row"
|
||||
th:if="${menu} and ${not menu.menuItems.empty}"
|
||||
th:with="menuItems = ${menu.menuItems}">
|
||||
|
||||
<li class="nav-item dropdown" th:each="menuItem : ${menuItems}">
|
||||
<a class="nav-link dropdown-toggle"
|
||||
th:text="${menuItem.status?.displayName}"
|
||||
th:href="${menuItem.status?.href}"
|
||||
th:target="${menuItem.spec?.target?.value}"
|
||||
th:attr="data-bs-toggle=${not menuItem.children?.empty} ? 'dropdown' : null">
|
||||
</a>
|
||||
|
||||
<!-- 二级下拉菜单 -->
|
||||
<div class="dropdown-menu" th:if="${not menuItem.children?.empty}">
|
||||
<ul>
|
||||
<li class="dropdown-submenu" th:each="child : ${menuItem.children}">
|
||||
<a class="dropdown-item"
|
||||
th:text="${child.status?.displayName}"
|
||||
th:href="${child.status?.href}"
|
||||
th:target="${child.spec?.target?.value}"
|
||||
th:attr="data-bs-toggle=${not child.children?.empty} ? 'dropdown' : null">
|
||||
</a>
|
||||
|
||||
<!-- 三级下拉菜单 - 现在将显示在二级菜单框内 -->
|
||||
<div class="third-level" th:if="${not child.children?.empty}">
|
||||
<ul>
|
||||
<li th:each="grandchild : ${child.children}">
|
||||
<a class="dropdown-item"
|
||||
th:text="${grandchild.status?.displayName}"
|
||||
th:href="${grandchild.status?.href}"
|
||||
th:target="${grandchild.spec?.target?.value}">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
Loading…
x
Reference in New Issue
Block a user