Управление меню в Yii2. Часть 2

Управление меню в Yii2

От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой статье мы с вами рассмотрим работу с виджетом Menu фреймворка Yii2. Данный виджет позволяет создавать и управлять меню в Yii2.

Итак, мы продолжаем работу с виджетом Menu и его опциями, которые позволяют настраивать меню. В предыдущей статье мы остановились на том, что можем изменять класс активного пункта меню и назначать дополнительные классы первому и последнему пункту. А что насчет атрибутов для всего меню в целом? Это также не проблема. Если мы захотим добавить атрибуты для меню, тогда можно обратиться к свойству options.

Давайте попробуем установить для меню несколько атрибутов:

<?= \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.

Управление меню в Yii2

Фреймворк YII2. Быстрая разработка с современным PHP фреймворком

Узнай тонкости современной веб-разработки с помощью фреймворка YII2

Узнать подробнее

Как видим, все очень просто. А что если нам нужно многоуровневое меню? И для этой задачи можно использовать данный виджет. Здесь достаточно просто вложить в конкретный элемент label еще один элемент items с аналогичной структурой. Попробуем добавить новый пункт Услуги и вложить в него несколько тестовых пунктов меню:

<?= \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

На этом сегодня все. Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк YII2: теория и первая практика

Овладейте азами фреймворка Yii2 за 5 дней!

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree