基于HTML短标签的PHP动态导航：子页面高亮及下拉菜单问题

问题1：子页面访问时父菜单保持高亮的解决方法 #

当前代码仅判断PAGE_TITLE是否等于导航项的URL，子页面（如design-sub.php）无法匹配父菜单designs.php，导致父菜单无法高亮。修改思路是将导航结构改为多维数组，关联父菜单与子页面，同时更新激活判断逻辑：

步骤1：重构导航数组 #

将一维数组改为包含子页面列表的多维结构：

date_default_timezone_set('America/Los_Angeles');
define('PAGE_TITLE', basename($_SERVER['PHP_SELF']));

// 更新导航数组，添加子页面关联
$nav1 = [
    'index.php' => [
        'text' => 'Samuel Phillips',
        'children' => []
    ],
    'designs.php' => [
        'text' => 'Design',
        'children' => ['design-sub1.php', 'design-sub2.php'] // 子页面文件名列表
    ],
    'services.php' => [
        'text' => 'Services',
        'children' => []
    ],
    'cases.php' => [
        'text' => 'Cases',
        'children' => []
    ],
    'contactme.php' => [
        'text' => 'Contact',
        'children' => []
    ]
];

// 更新页面标题配置，覆盖子页面情况
switch (PAGE_TITLE) {
    case 'designs.php':
    case 'design-sub1.php':
    case 'design-sub2.php':
        $title = "Chrysalis Designs";
        $pageID = "Designs";
        $quoteID = "";
        break;
    default:
        $title = PAGE_TITLE;
        $pageID = "";
        $quoteID = "";
}

步骤2：修改makeLinks函数的激活判断逻辑 #

判断当前页面是否为父页面，或属于父页面的子页面，再添加高亮类：

function makeLinks($nav1)
{
    $myReturn = '';
    $currentPage = PAGE_TITLE;
    foreach ($nav1 as $url => $item) {
        // 判断父菜单是否需要高亮
        $isActive = ($url == $currentPage) || in_array($currentPage, $item['children']);
        $activeClass = $isActive ? ' class="selected"' : '';
        
        $myReturn .= "<li><a{$activeClass} href=\"{$url}\">{$item['text']}</a></li>";
    }
    return $myReturn;
}

问题2：基于当前方法实现下拉菜单 #

同样通过多维数组存储子菜单的URL与文本，修改makeLinks函数生成嵌套的HTML结构，再配合CSS实现下拉效果：

步骤1：更新导航数组（包含子菜单文本） #

$nav1 = [
    'index.php' => [
        'text' => 'Samuel Phillips',
        'children' => []
    ],
    'designs.php' => [
        'text' => 'Design',
        'children' => [
            'design-sub1.php' => '网页设计',
            'design-sub2.php' => '品牌设计'
        ]
    ],
    'services.php' => [
        'text' => 'Services',
        'children' => []
    ],
    'cases.php' => [
        'text' => 'Cases',
        'children' => []
    ],
    'contactme.php' => [
        'text' => 'Contact',
        'children' => []
    ]
];

步骤2：修改makeLinks函数生成下拉结构 #

function makeLinks($nav1)
{
    $myReturn = '';
    $currentPage = PAGE_TITLE;
    foreach ($nav1 as $url => $item) {
        // 判断父菜单是否激活
        $isParentActive = ($url == $currentPage) || array_key_exists($currentPage, $item['children']);
        $parentClass = $isParentActive ? ' class="selected has-children"' : ' class="has-children"';
        
        $myReturn .= "<li{$parentClass}>";
        $myReturn .= "<a href=\"{$url}\">{$item['text']}</a>";
        
        // 生成子菜单
        if (!empty($item['children'])) {
            $myReturn .= '<ul class="submenu">';
            foreach ($item['children'] as $subUrl => $subText) {
                $subActive = ($subUrl == $currentPage) ? ' class="selected"' : '';
                $myReturn .= "<li><a{$subActive} href=\"{$subUrl}\">{$subText}</a></li>";
            }
            $myReturn .= '</ul>';
        }
        
        $myReturn .= "</li>";
    }
    return $myReturn;
}

步骤3：添加CSS实现下拉交互 #

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: #333;
}

nav ul li {
    position: relative;
    padding: 12px 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

nav ul li.selected a {
    color: #ffd700;
}

/* 子菜单默认隐藏 */
nav ul li .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #444;
    display: none;
    min-width: 160px;
}

/* 鼠标悬停或父菜单激活时显示子菜单 */
nav ul li:hover .submenu,
nav ul li.selected .submenu {
    display: block;
}

nav ul .submenu li {
    padding: 8px 15px;
}

更优的动态导航实现方案 #

1. 面向对象管理导航 #

将导航项封装为类，分离数据与逻辑，便于扩展维护：

class NavItem {
    public $url;
    public $text;
    public $children = [];

    public function __construct($url, $text, array $children = []) {
        $this->url = $url;
        $this->text = $text;
        $this->children = $children;
    }

    public function isActive(string $currentPage): bool {
        if ($this->url == $currentPage) return true;
        foreach ($this->children as $child) {
            if ($child->isActive($currentPage)) return true;
        }
        return false;
    }

    public function render(string $currentPage): string {
        $activeClass = $this->isActive($currentPage) ? ' class="selected"' : '';
        $html = "<li{$activeClass}><a href=\"{$this->url}\">{$this->text}</a>";
        if (!empty($this->children)) {
            $html .= '<ul class="submenu">';
            foreach ($this->children as $child) {
                $html .= $child->render($currentPage);
            }
            $html .= '</ul>';
        }
        $html .= '</li>';
        return $html;
    }
}

// 初始化导航
$navItems = [
    new NavItem('index.php', 'Samuel Phillips'),
    new NavItem('designs.php', 'Design', [
        new NavItem('design-sub1.php', '网页设计'),
        new NavItem('design-sub2.php', '品牌设计')
    ]),
    new NavItem('services.php', 'Services'),
    new NavItem('cases.php', 'Cases'),
    new NavItem('contactme.php', 'Contact')
];

// 渲染导航函数
function renderNav(array $navItems, string $currentPage): string {
    $html = '<ul>';
    foreach ($navItems as $item) {
        $html .= $item->render($currentPage);
    }
    $html .= '</ul>';
    return $html;
}

2. 分离导航配置与代码 #

将导航数据存入JSON/XML文件，通过PHP读取解析，修改导航时无需改动业务代码：

// nav-config.json
{
    "navItems": [
        {"url": "index.php", "text": "Samuel Phillips", "children": []},
        {"url": "designs.php", "text": "Design", "children": [
            {"url": "design-sub1.php", "text": "网页设计"},
            {"url": "design-sub2.php", "text": "品牌设计"}
        ]},
        {"url": "services.php", "text": "Services", "children": []},
        {"url": "cases.php", "text": "Cases", "children": []},
        {"url": "contactme.php", "text": "Contact", "children": []}
    ]
}

读取配置的PHP代码：

$navConfig = json_decode(file_get_contents('nav-config.json'), true);
// 后续可将配置转为NavItem对象或直接渲染

3. 结合路由系统（进阶） #

若项目使用自定义路由，可通过路由名称判断激活状态，摆脱对文件名的依赖，更符合现代开发规范。

内容的提问来源于stack exchange，提问作者Samuel Phillips