PHP 實現 Office XP 風格側邊導航菜單系統

經典 PHP 框架：仿 Office XP 風格左側框架式菜單

本系統採用框架集 (Frameset) 架構，左側固定寬度顯示分類菜單，右側主框架載入內容頁面。菜單支援多級分類、項目描述、懸停高亮、圖標顯示等 Office XP 風格視覺效果，並封裝為可復用的函數庫。

系統架構

<?php
// 入口文件：根據 $key 參數決定輸出哪個框架頁面
if ($key == "") {
    // 主框架集頁面
    echo <<<EOD
<HTML><HEAD><TITLE>Menu Sample</TITLE></HEAD>
<FRAMESET cols="161,*">
    <FRAME SRC="$PHP_SELF?key=menu" NAME="menu" SCROLLING=no NORESIZE>
    <FRAME SRC="$PHP_SELF?key=about" NAME="main" SCROLLING=auto NORESIZE>
</FRAMESET>
</HTML>
EOD;
    exit;
}
?>

菜單渲染核心 (key=menu)

<?php
if ($key == "menu") {
    // 視覺配置：Office XP 風格
    $MenuBackColor = "lightgrey";
    $ItemBackColor = "lightgrey";
    $ItemTextColor = "#000000";
    $SelectedItemDarkBorder = "#08246B";
    $SelectedItemLightBorder = "#08246B";
    $SelectedItemBackgroundColor = "#B5BED6";
    $menuSubSectionBackColor = "darkgray";
    $menuSubSectionFontColor = "black";
    $MenuFontSize = "9pt";
    $MenuBarHeight = 20;
    $defTarget = "main"; // 連結目標框架
    
    // 輸出樣式
    echo "<style>td { font-size: $MenuFontSize; font-family: Verdana, Arial, 宋體; }</style>";
    echo "<body leftmargin=0 topmargin=0 rightmargin=0 bgcolor=\"$MenuBackColor\">";
    
    // 菜單構建函數
    function menuStartSection($SectionSeq, $SectionName) { /* 輸出一級分類標題 */ }
    function menuAddItem($itemLabel, $StatusText, $URL, $target="") { /* 輸出菜單項 */ }
    function menuAddSubSection($ItemLabel) { /* 輸出二級分類標題 */ }
    function menuAddSubSectionLine() { /* 輸出分隔線 */ }
    function menuEndSection() { /* 結束分類 */ }
    function menuSectionAsItem($SectionSeq, $SectionName, $SectionDesc, $URL, $target="") { /* 可點擊的分類標題 */ }
    
    // 構建具體菜單結構
    menuStartSection(2, "代碼世界");
    menuAddItem("Joy ASP", "歡迎訪問Joy ASP", "$PHP_SELF?key=page&id=Joy ASP");
    menuAddItem("Java 世界", "歡迎訪問Java 世界", "$PHP_SELF?key=page&id=Java 世界");
    // ... 更多項目
    menuEndSection();
    
    menuStartSection(3, "開心一刻");
    menuAddSubSection("兒童類");
    menuAddItem("校園笑話", "校園笑話", "$PHP_SELF?key=page&id=校園笑話");
    // ... 
    menuEndSection();
    
    // 輸出 JavaScript 初始化腳本
    echo "</body>";
}
?>

內容頁面與關於頁面

<?php
if ($key == "page") {
    echo "<body><center><br>歡迎訪問 $id </center></body>";
}
if ($key == "about") {
    echo "<body><center><br>關於此菜單<br>僅支援 IE 5+，推薦 IE 6</center></body>";
}
?>

技術特點與現代視角

遷移建議

保留菜單數據結構 (JSON 格式)，重寫前端為 Vue/React 組件，後端僅提供 RESTful API 輸出菜單樹。框架集架構應完全棄用，改用單頁應用 (SPA) 或服務端渲染 (SSR) 架構。