yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 导航下拉菜单重构为方案 C 混合型
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- public/header.html: 去掉左右分栏，改为二级分组标题 + 三级国旗链接网格
- css/nav-mega-menu.css: 居中收窄面板(720px)，分组标题+网格布局
- js/nav-third-level.js: 清空旧的面板切换脚本（不再需要）
- 下拉面板不再全宽铺开，视觉更精致紧凑
This commit is contained in:
yiqiu
2026-03-18 18:03:27 +08:00
parent cc141973a5
commit f3d3a2954f
3 changed files with 138 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
public/header.html
View File

@@ -60,90 +60,76 @@
</nav>
<div class="nav-cont">
<div class="section-content">
<div class="nav-dropdown-inner">
{if isset($data.header_nav) && !empty($data.header_nav)}
{foreach $data.header_nav as $k=>$item}
{if isset($item.children) && !empty($item.children)}
<div class="nav-cont-menu mega-menu animated">
<div class="nav-content">
{php}
// 检查是否有包含三级菜单的二级项
$hasThirdLevel = false;
foreach ($item['children'] as $child) {
<div class="nav-cont-menu">
{php}
$hasThirdLevel = false;
foreach ($item['children'] as $child) {
if (isset($child['children']) && !empty($child['children'])) {
$hasThirdLevel = true;
break;
$hasThirdLevel = true;
break;
}
}
{/php}
}
{/php}
{if $hasThirdLevel}
<!-- 左侧二级菜单栏 -->
<div class="nav-left-sidebar">
{foreach $item.children as $childIndex=>$child}
{if isset($child.children) && !empty($child.children)}
<div class="nav-category-item" data-category-index="{$childIndex}">
{if $hasThirdLevel}
<!-- 方案 C：二级分组标题 + 三级国旗链接网格 -->
<div class="nav-groups">
{foreach $item.children as $childIndex=>$child}
{if isset($child.children) && !empty($child.children)}
<div class="nav-group">
<div class="nav-group-title">
{if !empty($child.icon)}
<span class="category-icon">
<img src="{$child.icon}" alt="{$child.name}">
</span>
<img src="{$child.icon}" alt="{$child.name}" class="nav-group-icon">
{/if}
<span class="nav-category-name">{$child.name}</span>
<span>{$child.name}</span>
{if !empty($child.description)}
<span class="nav-category-desc">{$child.description}</span>
<span class="nav-group-desc">— {$child.description}</span>
{/if}
</div>
{/if}
{/foreach}
</div>
<!-- 右侧三级菜单区域 -->
<div class="nav-right-content">
{foreach $item.children as $childIndex=>$child}
{if isset($child.children) && !empty($child.children)}
<div class="nav-third-panel" data-panel-index="{$childIndex}">
<div class="nav-third-title">{$child.name}</div>
<div class="nav-third-grid">
{foreach $child.children as $grandchild}
<div class="nav-third-item">
<a href="{if !empty($grandchild.file_address)}{$grandchild.file_address}{else/}javascript:;{/if}"
class="nav-third-link" {if !empty($grandchild.blank)}target="_blank" {/if}
title="{$grandchild.name}{if !empty($grandchild.description)} - {$grandchild.description}{/if}">
{if !empty($grandchild.country_code)}
<img src="/web/BlackFruit-web/assets/country/{$grandchild.country_code}.png"
alt="{$grandchild.country_code}" class="country-flag" onerror="this.style.display='none'">
{/if}
{$grandchild.name}
</a>
</div>
{/foreach}
</div>
</div>
{/if}
{/foreach}
</div>
{else}
<!-- 无三级菜单，使用横向网格布局 -->
<div class="nav-simple-grid">
{foreach $item.children as $child}
<a href="{if !empty($child.file_address)}{$child.file_address}{else/}javascript:;{/if}"
class="nav-simple-item" {if !empty($child.blank)}target="_blank" {/if}>
{if !empty($child.icon)}
<div class="nav-simple-icon">
<img src="{$child.icon}" alt="{$child.name}">
</div>
{/if}
<div class="nav-simple-info">
<div class="nav-simple-title">{$child.name}</div>
{if !empty($child.description)}
<div class="nav-simple-desc">{$child.description}</div>
<div class="nav-group-grid">
{foreach $child.children as $grandchild}
<a href="{if !empty($grandchild.file_address)}{$grandchild.file_address}{else/}javascript:;{/if}"
class="nav-grid-link" {if !empty($grandchild.blank)}target="_blank" {/if}
title="{$grandchild.name}{if !empty($grandchild.description)} - {$grandchild.description}{/if}">
{if !empty($grandchild.country_code)}
<img src="/web/BlackFruit-web/assets/country/{$grandchild.country_code}.png"
alt="{$grandchild.country_code}" class="country-flag" onerror="this.style.display='none'">
{/if}
</div>
</a>
{/foreach}
{$grandchild.name}
</a>
{/foreach}
</div>
</div>
{/if}
{/foreach}
</div>
{else}
<!-- 纯二级：简单网格 -->
<div class="nav-simple-grid">
{foreach $item.children as $child}
<a href="{if !empty($child.file_address)}{$child.file_address}{else/}javascript:;{/if}"
class="nav-simple-item" {if !empty($child.blank)}target="_blank" {/if}>
{if !empty($child.icon)}
<div class="nav-simple-icon">
<img src="{$child.icon}" alt="{$child.name}">
</div>
{/if}
<div class="nav-simple-info">
<div class="nav-simple-title">{$child.name}</div>
{if !empty($child.description)}
<div class="nav-simple-desc">{$child.description}</div>
{/if}
</div>
</a>
{/foreach}
</div>
{/if}
</div>
{else /}
<div class="nav-cont-menu nav-cont-empty"></div>