我目前有一个包含以下项目的菜单小部件,这是项目#1
$menuIteams[] = [
'label' => 'Vouchers',
'url' => '#',
'template' => '<a href="{url}" class="nav-link"><i class="icon-cash3"></i> <span>
{label}
<span class="d-block font-weight-normal opacity-50"></span> </a>',
'items' => [
['label' => 'View All', 'url' => ['/voucher/index'], 'template' => '<a href="{url}" class="nav-link"><i class="icon-copy3"></i> {label}<span> </a>'],
['label' => 'Create New', 'url' => ['/voucher/create'], 'template' => '<a href="{url}" class="nav-link"><i class="icon-pen6"></i> {label}<span> </a>'],
],
'options' => [
'class' => 'nav-item nav-item-submenu',
'data-submenu-title' => 'Layouts',
],
];
并将所有项目附加到菜单小部件
echo \yii\widgets\Menu::widget([
'options' => [
'class' => 'nav nav-sidebar',
'data-nav-type' => 'accordion',
],
'items' => $menuIteams,
'itemOptions' => array('class' => 'nav-item'),
'submenuTemplate' => "\n<ul class='nav nav-group-sub'>\n{items}\n</ul>\n",
'encodeLabels' => false, //allows you to use html in labels
'activateParents' => false,
]);
我希望我的 menuIteams[] {label} 出现在每个相应的子菜单项的顶部
因此,对于上面的示例,优惠券将出现在子菜单的顶部,然后是项目列表
用图像更好地解释
这与此相似
当然,侧边栏应该折叠,子菜单应该显示为类似于 image#1 的下拉菜单
呈现的 HTML
<li class="nav-item nav-item-submenu" data-submenu-title="Layouts"><a href="#" class="nav-link"><i class="fas fa-print"></i> <span>
Print Digital
<span class="d-block font-weight-normal opacity-50"></span> </a>
<ul class='nav nav-group-sub' data-submenu-title=<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-extra-material-master/index" class="nav-link"><i class="icon-copy3"></i> Extra Material<span> </a></li>
<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-finishing-master/index" class="nav-link"><i class="icon-copy3"></i> Finishing<span> </a></li>>
<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-extra-material-master/index" class="nav-link"><i class="icon-copy3"></i> Extra Material<span> </a></li>
<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-finishing-master/index" class="nav-link"><i class="icon-copy3"></i> Finishing<span> </a></li>
</ul>
</li>
预期的
<li class="nav-item nav-item-submenu nav-item-open">
<a href="#" class="nav-link"><i class="icon-color-sampler"></i> <span>Themes</span></a>
<ul class="nav nav-group-sub" data-submenu-title="Themes" style="display: block;">
<li class="nav-item"><a href="index.html" class="nav-link active">Default</a></li>
<li class="nav-item"><a href="../../../LTR/material/full/index.html" class="nav-link">Material</a></li>
<li class="nav-item"><a href="../../../LTR/dark/full/index.html" class="nav-link">Dark</a></li>
<li class="nav-item"><a href="../../../LTR/clean/full/index.html" class="nav-link disabled">Clean <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></a></li>
</ul>
</li>