Drupal中基于$menu_tree实现Bootstrap 5下拉菜单渲染问题

核心错误点 #

现有代码存在4个关键问题导致下拉菜单无法正常工作：

• 包含子菜单的顶级<li>未添加dropdown类，父级链接缺少Bootstrap 5下拉触发必需的dropdown-toggle类、data-bs-toggle等属性
• 子菜单容器错误使用<li>标签，应该用<div class="dropdown-menu">包裹下拉项
• 子菜单链接错误使用nav-link类，且存在重复渲染a标签的语法错误
• 两个渲染函数逻辑重复、递归调用层级混乱

修正后代码 #

template.php 代码 #

function render_menu_tree($menu_tree, $is_submenu = false) {
    // 区分顶级菜单和子菜单的外层容器
    if (!$is_submenu) {
        print '<ul class="mb-2 mb-lg-0 me-lg-auto navbar-nav">';
    } else {
        print '<div class="dropdown-menu">';
    }

    foreach ($menu_tree as $link) {
        $link_path = '#';
        $link_title = $link['link']['link_title'];
        $target = "";
        $has_children = count($link['below']) > 0;

        // 处理链接路径
        if($link['link']['link_path']) {
            $link_path = base_path() . drupal_get_path_alias($link['link']['link_path']);
            if($link['link']['link_path'] == '<front>'){
                $link_path = "/";
            }
            // 处理外部链接跳转逻辑
            if( (strpos($link['link']['link_path'], "http://") !== false) ||
                (strpos($link['link']['link_path'], "https://") !== false) ) {
                $link_path = $link['link']['link_path'];
                $target = " target='_blank'";
            }
        }

        if (!$is_submenu) {
            // 渲染顶级菜单项
            $li_class = $has_children ? 'nav-item dropdown' : 'nav-item';
            print "<li class=\"{$li_class}\">";
            // 给有子菜单的父链接加下拉属性
            if ($has_children) {
                $a_class = 'dropdown-toggle nav-link px-lg-3 py-lg-4 text-light';
                $extra_attr = ' role="button" data-bs-toggle="dropdown" aria-expanded="false"';
            } else {
                $a_class = 'nav-link px-lg-3 py-lg-4 text-light';
                $extra_attr = '';
            }
            print "<a class=\"{$a_class}\" href=\"{$link_path}\" {$target} {$extra_attr}>" . mb_strtoupper($link_title) . "</a>";
            // 递归渲染子菜单
            if ($has_children) {
                render_menu_tree($link['below'], true);
            }
            print '</li>';
        } else {
            // 渲染下拉菜单项
            print "<a class=\"dropdown-item\" href=\"{$link_path}\" {$target}>" . mb_strtoupper($link_title) . "</a>";
            // 支持多级下拉
            if ($has_children) {
                render_menu_tree($link['below'], true);
            }
        }
    }

    if (!$is_submenu) {
        print '</ul>';
        // 输出登录注册按钮，对齐目标HTML结构
        print '<div class="ms-lg-3">
            <a class="btn btn-outline-primary pe-3 ps-3" href="#">Log in</a>
            <a class="btn btn-primary pe-3 ps-3" href="#" style="background-color: #ee545d;">Register</a>
        </div>';
    } else {
        print '</div>';
    }
}

page.tpl.php 代码 #

无需修改，保持原有调用逻辑即可：

<div class="collapse navbar-collapse" id="navbarNavDropdown-4"> 
     <?php
           $main_menu_tree = menu_tree_all_data('main-menu', null, 3);
           render_menu_tree($main_menu_tree);
      ?>                            
</div>

可选优化：当前页面高亮 #

可在顶级链接的class判断逻辑中加入当前路径匹配规则，给当前访问的页面链接加上active类和aria-current="page"属性，实现导航高亮效果。

内容的提问来源于stack exchange，提问作者Douglas Teles