Question

我希望我的菜单有超过2个级别。看起来Yii 2只能渲染2级。例如：

NavBar::begin();

echo Nav::widget([
    'options' => ['class' => 'navbar-nav navbar-right'],
    'items' => [
        [
            'label' => 'Level 1',
            'items' => [
                ['label' => 'Level 2 - 1', 'url' => '#'],
                ['label' => 'Level 2 - 2', 'url' => '#'],
                [
                    'label' => 'Level 2 - 3',
                    'items' => [
                        ['label' => 'Level 3 - 1', 'url' => '#'],
                        ['label' => 'Level 3 - 2', 'url' => '#'],
                    ],
                ],
            ]
        ],
    ],
]);

NavBar::end();

不会显示Level 3 - x菜单项。如何在菜单中添加更多级别？

Answer 1

这不是Yii 2的限制，它是Boostrap 3的限制。

以下是来自 mdo （Boostrap 3主要贡献者之一）的引用：

我们还没有看到有人以有意义的方式和代码使用子菜单使它们运行良好的必要性是太多的开销。子菜单现在就在网上没有太多的地方，特别是移动网络。它们将被删除3.0。

取自here。

但是，您可以找到一些替代方案来使用更多级别。例如，看看这个extension。

此问题还会讨论更多细节和示例here。

Answer 2

尝试使用Nav小部件的this extension。

Answer 3

1）在/web/css/site.css

中添加Css

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
    min-width: 200px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}
.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}
.dropdown-submenu.pull-left {
    float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

2）添加子菜单和属性'itemsOptions'，'submenuOptions'，'items'：

...
[
   'label' => 'Level 2 - 3',
   'itemsOptions'=>['class'=>'dropdown-submenu'],
   'submenuOptions'=>['class'=>'dropdown-menu'],
   'items' => [
        ['label' => 'Level 3 - 1', 'url' => '#'],
        ['label' => 'Level 3 - 2', 'url' => '#'],
    ],
],
....

3）ok !!

Yii2中的多级Bootstrap菜单

3 个答案: