phpcms 调用关联菜单

基础概念

phpcms 是一个基于 PHP 的内容管理系统（CMS），它提供了丰富的功能来帮助用户管理和发布网站内容。关联菜单是指在一个页面中，通过某种方式将多个相关的菜单项连接起来，以便用户可以方便地导航到相关的内容。

类型

水平关联菜单：在页面顶部或底部水平排列的菜单。
垂直关联菜单：在页面侧边垂直排列的菜单。
下拉关联菜单：点击某个菜单项后，展开一个包含多个子菜单项的下拉菜单。

应用场景

关联菜单广泛应用于各种类型的网站，特别是内容丰富、分类众多的网站，如新闻网站、电子商务网站、博客等。

实现方法

以下是一个简单的示例代码，展示如何在 phpcms 中实现关联菜单：

<?php
// 假设我们有一个菜单数组
$menus = [
    ['name' => '首页', 'url' => '/index'],
    ['name' => '新闻', 'url' => '/news', 'children' => [
        ['name' => '国内新闻', 'url' => '/news/domestic'],
        ['name' => '国际新闻', 'url' => '/news/international']
    ]],
    ['name' => '产品', 'url' => '/products', 'children' => [
        ['name' => '产品A', 'url' => '/products/a'],
        ['name' => '产品B', 'url' => '/products/b']
    ]]
];

// 输出关联菜单
function render_menu($menus, $parent = '') {
    foreach ($menus as $menu) {
        $class = $parent ? 'sub-menu' : '';
        echo "<li class='{$class}'>";
        echo "<a href='{$menu['url']}'>{$menu['name']}</a>";
        if (isset($menu['children'])) {
            echo "<ul>";
            render_menu($menu['children'], 'sub-menu-item');
            echo "</ul>";
        }
        echo "</li>";
    }
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关联菜单示例</title>
    <style>
        .sub-menu {
            display: none;
        }
        .sub-menu-item:hover .sub-menu {
            display: block;
        }
    </style>
</head>
<body>
    <ul>
        <?php render_menu($menus); ?>
    </ul>
</body>
</html>

遇到的问题及解决方法

问题：关联菜单无法展开

原因：可能是 JavaScript 或 CSS 代码有问题，导致子菜单无法展开。

解决方法：

检查 CSS 样式，确保子菜单的 display 属性设置正确。
检查 JavaScript 代码，确保点击事件能够正确触发子菜单的展开。

document.addEventListener('DOMContentLoaded', function() {
    var subMenus = document.querySelectorAll('.sub-menu-item');
    subMenus.forEach(function(subMenu) {
        subMenu.addEventListener('mouseenter', function() {
            this.querySelector('.sub-menu').style.display = 'block';
        });
        subMenu.addEventListener('mouseleave', function() {
            this.querySelector('.sub-menu').style.display = 'none';
        });
    });
});