Yii2 中的多级引导菜单

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();

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

Answer 1

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

这里引用自 mdo（Boostrap 3 的主要贡献者之一）：

We haven't seen anyone using submenus in meaningful ways and the code necessary to make them work well is just too much overhead. Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 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) 好的!!

Yii2 中的多级引导菜单

Multilevel Boostrap Menu in Yii 2

yii2

twitter-bootstrap-3