Вложенное Dropdown меню через Widget Menu

[german.igortcev]

Нужна подсказка по реализации сложного меню. не могу немного сообразить как сделать..

С обычными пунктами вопросов нет, проблема с dropdown

меню имеет вид


С структурой dropdown

Код: Выделить всё

<li class="droplink active open">
<a href="#"><span class="menu-icon icon-briefcase"></span>
<p>LandBuilder</p><span class="arrow"></span></a>
                            <div class="droplink-block">
                                <div class="col_inline">
                                      <ul class="sub-menu">
                                          <li><p>Ниши</p></li>
                                          <li><a href="segmentss.html">Список ниш</a></li>
                                          <li><a href="#">Теги</a></li>
                                      </ul>
                                </div>
                                <div class="col_inline">
                                      <ul class="sub-menu">
                                          <li><p>Шаблоны</p></li>
                                          <li class="active"><a href="#">Cписок шаблонов</a></li>
                                          <li><a href="#">Секции</a></li>
                                          <li><a href="#">Категории секций</a></li>
                                      </ul>
                                </div>
                                <div class="col_inline">
                                      <ul class="sub-menu">
                                          <li><p>Плагины</p></li>
                                          <li><a href="#">Список плагинов</a></li>
                                          <li><a href="#">Категории плагинов</a></li>
                                          <li><a href="#">Версии плагинов</a></li>
                                      </ul>
                                </div>
                            </div>

                        </li> 

Думал

Код: Выделить всё

[
                            'label' => 'Builder',
                            'url' => '#',
                            'icon' => 'menu-icon icon-briefcase',
                            'options' => ['class' => 'droplink'],
                            'items' => [
                                [
                                    'label' => 'Ниши',
                                    'url' => '#',
                                    'items' =>
                                        [
                                            [
                                                'label' => 'Список ниш',
                                                'url' => ['templates/index'],
                                            ],
                                            [
                                                'label' => 'Тэги',
                                                'url' => ['template-tags/index'],
                                            ],
                                        ],
                                ],
                                [
                                    'label' => 'Шаблоны',
                                    'url' => '#',
                                    'items' =>
                                        [
                                            [
                                                'label' => 'Список шаблонов',
                                                'url' => ['templates/index'],
                                            ],
                                            [
                                                'label' => 'Секции',
                                                'url' => ['sections/index'],
                                            ],
                                            [
                                                'label' => 'Категории секций',
                                                'url' => ['sections-category/index'],
                                            ],
                                        ],
                                ],

                                [
                                    'label' => 'Плагины',
                                    'url' => '#',
                                    'items' =>
                                        [
                                            [
                                                'label' => 'Список плагинов',
                                                'url' => ['plugins/index'],
                                            ],
                                            [
                                                'label' => 'Категории плагинов',
                                                'url' => ['plugins-category/index'],
                                            ],
                                            [
                                                'label' => 'Версии плагинов',
                                                'url' => ['framework-version/index'],
                                            ],
                                            [
                                                'label' => 'Версии',
                                                'url' => ['framework-version/index'],
                                            ],
                                        ],
                                ],

                            ],
                        ],
 

Есть у кого пример как можно вынести формирование sub-menu в виджете menu? или подскажите возможное решение.

буду признателен если есть что то подобное

[yiijeka]

в чате вам ответил:

вложенное меню из коробки не поддерживается, так как тут bootstrap css, а он тоже вложенные меню не поддерживает. Вам нужно переписать Nav виджет под свою задачу.

[dmg]

в чате вам ответил:
вложенное меню из коробки не поддерживается, так как тут bootstrap css, а он тоже вложенные меню не поддерживает. Вам нужно переписать Nav виджет под свою задачу.

как вы определили, что bootstrap?
из коробки widgets/menu вложенность поддерживает.
для bootstrap есть у kartik.
http://demos.krajee.com/nav-x

[yiijeka]

Я извиняюсь, я имел ввиду многоуровневость. Тут она в некотором роде просится. Если бы widgets/menu или bootsrap/menu их поддерживали, то мы бы давно запили их в dmstr/yii2-adminlte-asset
А так используем нативный html. Тут у ТС тоже похожая ситуация, т.е. либо переписывать виджет под свои нужды, либо обычный html использовать.

[I_decision]

Я извиняюсь, я имел ввиду многоуровневость. Тут она в некотором роде просится. Если бы widgets/menu или bootsrap/menu их поддерживали, то мы бы давно запили их в dmstr/yii2-adminlte-asset
А так используем нативный html. Тут у ТС тоже похожая ситуация, т.е. либо переписывать виджет под свои нужды, либо обычный html использовать.

Я проще скажу, что стандартная менюшка Yii2 так же подходит под реализацию многоуровнего меню, дело в том что в коде ясно дано понять какой класс за какой отвечает. Пример:

Код: Выделить всё

    <?php
    NavBar::begin([
        'brandLabel' => 'My Company',
        'brandUrl' => Yii::$app->homeUrl,
        'options' => [
            'class' => 'navbar-inverse navbar-fixed-top',
        ],
    ]);
    $menuItems = [
        ['label' => 'Home', 'url' => ['/site/index']],
        ['label' => 'About', 'url' => ['/site/about']],
        ['label' => 'Contact', 'url' => ['/site/contact']],
    ];
    if (Yii::$app->user->isGuest) {
        $menuItems[] = ['label' => 'Signup', 'url' => ['/site/signup']];
        $menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];
    } else {
        $menuItems[] = '<li>'
            . Html::beginForm(['/site/logout'], 'post')
            . Html::submitButton(
                'Logout (' . Yii::$app->user->identity->username . ')',
                ['class' => 'btn btn-link logout']
            )
            . Html::endForm()
            . '</li>';
    }
    echo Nav::widget([
        'options' => ['class' => 'navbar-nav navbar-right'],
        'items' => $menuItems,
    ]);
    NavBar::end();
    ?>

Отсюда ясно, что "NavBar" - это нескрываемая область левой стороны меню, куда обычно пихают название сайта или компании, а "Nav" - это правая сторона меню, которая в мобильной версии сворачивается в три полосочки. Так вот, выпадающее меню надо настраивать в Nav, если хочешь запихать туда и иконки, это можно сделать двумя способами, прописать свойство

Код: Выделить всё

    public $linkTemplate = '<a href="{url}">{icon} {label}</a>';
    public $submenuTemplate = "\n<ul class='treeview-menu' {show}>\n{items}\n</ul>\n";
    public $activateParents = true;

Либо в наглую, в label впиши, только в классе Nav поменяй:

Код: Выделить всё

public $encodeLabels = true;

на

Код: Выделить всё

public $encodeLabels = false;

А то иконки будут в виде html-кода.
Что касается выпадающего списка, то он тоже возможен в стандартном меню Yii2:

Код: Выделить всё

$menuItems = [
 ['label' => 'Меню', 'options' =>  ['id' => 'down_history'], 
        'items'=>[
          ['label' => 'Страницы1', 'url' => ['/site/page'], 'options' => ['class' => 'nameclass']],
          ['label' => 'Страницы2', 'url' => ['/site/info'], 'options' => ['class' => 'nameclass']],
          ['label' => 'Страницы3', 'url' => ['/site/faq'], 'options' => ['class' => 'nameclass']],
          ['label' => 'Страницы4', 'url' => ['/site/reset'], 'options' => ['class' => 'nameclass']],
      	  ['label' => 'Страницы5', 'url' => ['/site/user'], 'options' => ['class' => 'nameclass']],
        ]],
 ];

'options' можно убрать, работать тоже будет, просто показал как можно присвоить css стиль, но он пригодится, если в планах создать второй уровень или третий, и так далее.

[Idaho]

простите за поднятие старой темы, но сам потратил пару часов.

в дополнение к последнему посту:
для полного счастья, нужно подключить bootstrap.js
(c подключенным ранее bootstrap.min.js не работало)

[ziya584]

Либо в наглую, в label впиши, только в классе Nav поменяй:

Код: Выделить всё

public $encodeLabels = true;

на

Код: Выделить всё

public $encodeLabels = false;

Так делать не хорошо? Это как-то негативно влияет на безопасность?)