От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой статье мы с вами рассмотрим работу с виджетом Menu фреймворка Yii2. Данный виджет позволяет создавать и управлять меню в Yii2.
Итак, мы продолжаем работу с виджетом Menu и его опциями, которые позволяют настраивать меню. В предыдущей статье мы остановились на том, что можем изменять класс активного пункта меню и назначать дополнительные классы первому и последнему пункту. А что насчет атрибутов для всего меню в целом? Это также не проблема. Если мы захотим добавить атрибуты для меню, тогда можно обратиться к свойству options.
Давайте попробуем установить для меню несколько атрибутов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?= \yii\widgets\Menu::widget([ 'items' => [ ['label' => 'Home', 'url' => ['site/index']], ['label' => 'About', 'url' => ['site/about']], ['label' => 'Contact', 'url' => ['site/contact']], ], 'activeCssClass'=>'active', 'firstItemCssClass'=>'fist-item', 'lastItemCssClass' =>'last-item', 'options' => [ 'id'=>'menu', 'class' => 'menu', 'data-id'=>'menu', ], ]); ?> |
Если теперь посмотреть исходный код элемента, то мы увидим назначенные значения menu для атрибутов id, class и data-id контейнера ul.
Как видим, все очень просто. А что если нам нужно многоуровневое меню? И для этой задачи можно использовать данный виджет. Здесь достаточно просто вложить в конкретный элемент label еще один элемент items с аналогичной структурой. Попробуем добавить новый пункт Услуги и вложить в него несколько тестовых пунктов меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?= \yii\widgets\Menu::widget([ 'items' => [ ['label' => 'Home', 'url' => ['site/index']], ['label' => 'About', 'url' => ['site/about']], ['label' => 'Contact', 'url' => ['site/contact']], [ 'label' => 'Services', 'url' => ['#'], 'options' => ['class' => 'dropdown'], 'items' => [ ['label' => 'Test 1', 'url' => ['#']], ['label' => 'Test 2', 'url' => ['#']], ] ], ], 'activeCssClass'=>'active', 'firstItemCssClass'=>'fist-item', 'lastItemCssClass' =>'last-item', 'options' => [ 'id'=>'menu', 'class' => 'menu', 'data-id'=>'menu', ], ]); ?> |
Если теперь взглянуть на полученный исходный код, то там мы найдем классическую структуру многоуровневого меню. Оно для нашего шаблона не будет выпадающим, поскольку наш шаблон не предполагает такой возможности, но добавив несколько правил оформления мы легко можем решить и эту задачу.
На этом сегодня все. Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.
Комментарии (1)