2

我正在创建一个基于 yii2 和 learn-plus 仪表板主题的 Web 应用程序，可折叠侧边栏导航菜单已经实现，其 id 充当目标链接 (#menu_id)，以便在单击父链接时打开菜单，现在我我正在尝试使用 Multiple submenuTemplate 添加 Yii2 Menu::widget，以便我可以容纳这些 ID，因为每个子菜单都应该有自己的 ID。

我已经创建了菜单，它与单个可折叠菜单完美配合，当我添加菜单的多个可折叠部分时，问题就出现了。


<?php
use yii\widgets\Menu;
use yii\helpers\Html;


/**
 * Created by PhpStorm.
 * User: Mr Daud Mabena
 * Date: 01/05/19
 * Time: 01:34 PM
 */

echo Menu::widget([
    'activeCssClass' => "active",
    'activateParents' => true,
    'encodeLabels' => false,
    'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu'>\n{items}\n</ul>\n",
    'options' => ['class' => 'sidebar-menu'],
    'items' => [
        [
            'label' => 'Security Dashboard',
            'url' => ['/security/'],
            'options' => ['class' => 'sidebar-menu-item'],
            'template' => "<a class='sidebar-menu-button' href='{url}'>
                <i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>bar_chart</i>
                {label}
            </a>",
        ],
        [
            'id' => 'components_menu',
            'template' => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu'>
                <i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>tune</i>
                List of Users
                <span class='ml-auto sidebar-menu-toggle-icon'></span>
            </a>",
            'items' => [
                [
                    'label' => 'Staffs',
                    'url' => ['/security/users/staffs'],
                    'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                    'options' => ['class' => 'sidebar-menu-item'],
                ],
                [
                    'label' => 'Applicant',
                    'url' => ['/security/users/applicants'],
                    'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                    'options' => ['class' => 'sidebar-menu-item'],
                ],
                [
                    'label' => 'Students',
                    'url' => ['/security/users/students'],
                    'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                    'options' => ['class' => 'sidebar-menu-item'],
                ],
            ]
        ],
        [
            "label" => "Add New Staff",
            "url" => ["/security/users/create"],
            "template" => "<a class='sidebar-menu-button' href='{url}'><i class='fa fa-bar-chart' aria-hidden='true'></i> {label}</a>",
        ],
        [
            "label" => "Logout",
            "url" => ["/admission/applicants/reports"],
            "template" => Html::beginForm(['/security/users/logout'], 'post') . Html::submitButton('Logout', ['class' => 'sidebar-menu-button logout']) . Html::endForm(),
        ],
    ],
]);

我需要有多个

'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu'>\n{items}\n</ul>\n",

具有不同的 id，第一个是 setup_menu 希望添加其他 id，如 access_levels 等

4

1 回答 1

1

将submenuTemplate父项内部移动到您希望子菜单出现的位置，目前，您为所有子菜单使用一个模板，而您需要为每个子菜单使用单独的模板，并id为所有子菜单分配不同的 s 和hreffor父项。

例如，请参见下图，其中您在List of Users2 Levels Collapsable 下有多级可折叠子菜单，在Add New Staff1 Level 下有其他子菜单。

在此处输入图像描述

您可以使用以下代码，我复制了现有子菜单下的项目，因此您可以相应地更改它，但想法就在那里。我使用setup_menu_1格式为菜单分配 3 个不同的 id，也更改它们

echo Menu::widget(
    [
        'activeCssClass' => "active",
        'activateParents' => true,
        'encodeLabels' => false,
        'options' => ['class' => 'sidebar-menu'],
        'items' => [
            [
                'label' => 'Security Dashboard',
                'url' => ['/security/'],
                'options' => ['class' => 'sidebar-menu-item'],
                'template' => "<a class='sidebar-menu-button' href='{url}'><i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>bar_chart</i>{label}</a>",
            ],
            [
                'id' => 'components_menu',
                'template' => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu_1'><i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>tune</i>List of Users<span class='ml-auto sidebar-menu-toggle-icon'></span></a>",
                'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu_1'>\n{items}\n</ul>\n",
                'items' => [
                    [
                        'label' => 'Staffs',
                        'template' => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu_3'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                        'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu_3'>\n{items}\n</ul>\n",
                        'items' => [
                            [
                                'label' => 'Staffs',
                                'url' => ['/security/users/staffs'],
                                'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                                'options' => ['class' => 'sidebar-menu-item'],
                            ],
                            [
                                'label' => 'Applicant',
                                'url' => ['/security/users/applicants'],
                                'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                                'options' => ['class' => 'sidebar-menu-item'],
                            ],
                            [
                                'label' => 'Students',
                                'url' => ['/security/users/students'],
                                'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                                'options' => ['class' => 'sidebar-menu-item'],
                            ],
                        ]
                    ],
                    [
                        'label' => 'Applicant',
                        'url' => ['/security/users/applicants'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                    [
                        'label' => 'Students',
                        'url' => ['/security/users/students'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                ]
            ],
            [
                "label" => "Some Other Menu",
                'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu_2'>\n{items}\n</ul>\n",
                "template" => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu_2'><i class='fa fa-bar-chart' aria-hidden='true'></i> {label}</a>",
                'items' => [
                    [
                        'label' => 'Staffs',
                        'url' => ['/security/users/staffs'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                    [
                        'label' => 'Applicant',
                        'url' => ['/security/users/applicants'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                    [
                        'label' => 'Students',
                        'url' => ['/security/users/students'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                ]
            ],
            [
                "label" => "Logout",
                "url" => ["/admission/applicants/reports"],
                "template" => Html::beginForm(['/security/users/logout'], 'post') . Html::submitButton('Logout', ['class' => 'sidebar-menu-button logout']) . Html::endForm(),
            ],
        ],
    ]
);
于 2019-05-18T20:40:26.480 回答