PHP 實作三級導航選單

三級導航資料結構設計

三級導航（一級分類 → 二級分類 → 三級項目）是電商、企業站常見需求。關鍵在於資料結構的層級關聯與前端互動邏輯的分離。

PHP 端：多維陣列配置

<?php
// config/nav.php
return [
    [
        'one' => '關於我們',
        'two' => [
            [
                'three_tit' => '公司介紹',
                'three_cont' => ['企業概況', '組織架構', '發展歷程', '企業文化', '服務理念']
            ],
            [
                'three_tit' => '企業榮譽',
                'three_cont' => ['獲獎證書', '行業貢獻', '資質認證', '協會活動', '公司的成就']
            ],
            [
                'three_tit' => '銷售網絡',
                'three_cont' => ['東北', '華北', '中東', '華南', '西南', '西北']
            ]
        ]
    ],
    [
        'one' => '產品展示',
        'two' => [
            [
                'three_tit' => '進出口貿易',
                'three_cont' => ['數碼產品', '最新能源', '新鮮水果', '肉類食品', '衣服', '金銀首飾']
            ],
            [
                'three_tit' => '商業服務',
                'three_cont' => ['資格認證', '人才培養', '熱門商品推薦', '最新科技前沿']
            ]
        ]
    ],
    // ... 更多分類
];
?>

前端渲染邏輯（簡化版）

<?php
$navData = include 'config/nav.php';
?>

CSS 關鍵點（Hover 展開）

.nav-three-level .sub-menu { display: none; position: absolute; left: 100%; top: 0; }
.nav-three-level li:hover > .sub-menu { display: block; }
.level-3 { left: 100%; top: 0; }

JS 增強：點擊切換、行動裝置適配

document.querySelectorAll('.nav-three-level li').forEach(li => {
    li.addEventListener('click', e => {
        if (e.target.tagName === 'A' && li.querySelector('.sub-menu')) {
            e.preventDefault();
            li.classList.toggle('open');
        }
    });
});

資料庫驅動版本建議

若分類頻繁變動，建議改用資料庫儲存：

CREATE TABLE `nav_category` (
    `id` INT PRIMARY KEY AUTO_INCREMENT,
    `name` VARCHAR(50) NOT NULL,
    `parent_id` INT DEFAULT 0,  -- 0 為頂層
    `sort` INT DEFAULT 0,
    `url` VARCHAR(255) DEFAULT '#'
);

PHP 端用遞迴或 parent_id 分組建構樹狀陣列，前端渲染邏輯不變。

效能優化提示

• 導航資料極少變動 → 快取完整 HTML 片段（Redis/File cache），避免每請求重組陣列。
• 使用 opcache 加速 PHP 陣列載入。
• 行動版改為抽屜式/手風琴選單，減少 DOM 節點。

妥善設計資料結構，前後端分工明確，三級導航即可輕鬆維護與擴展。