Multilevel Boostrap Menu in Yii 2

问题:

I want my menu to have more than 2 levels. Looks like Yii 2 only renders up to 2 levels. For example this:

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

will not display the Level 3 - x menu items. How do I add more levels to the menu?

回答1:

This is not Yii 2 limitation, it's Boostrap 3 limitation.

Here is quote from mdo (one of the main Boostrap 3 contributors):

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.

It's taken from here.

However you can find some alternatives to use more levels. For example take a look this extension.

Also this question is discussed with more details and examples here.

回答2:

Try to use this extension of Nav widget.

回答3:

1) Add Css in /web/css/site.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) Add submenu and attributes '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 !!