От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой статье мы с вами рассмотрим работу с виджетом Menu фреймворка Yii2. Данный виджет позволяет создавать и управлять меню в Yii2.
Итак, в предыдущих статьях мы с вами перенесли сверстанный шаблон в структуру фреймворка. Давайте на примере внедренного шаблона рассмотрим работу с виджетом меню, который предлагает нам фреймворк из коробки. Вот как выглядит меню в шаблоне сейчас:
|
1 2 3 4 5 6 |
<ul> <li class="active"><a href="index.html">HOME</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="contact.html">CONTACT</a></li> <div class="clearfix"> </div> </ul> |
Как видим, это стандартный список, при помощи которого и принято делать типовые меню. В нем есть активный пункт, для указания которого используется класс active. Также такой список удобен для реализации многоуровневого, выпадающего или вертикального меню. Для этого достаточно немного изменить верстку, добавив вложенные пункты для многоуровневого меню и изменить стили для получения необходимого формата меню.
На самом деле при реализации меню на сайте совсем не обязательно для этого использовать виджет. Мы вполне можем оставить имеющуюся верстку, изменив в ней ссылки и переименовав пункты. Но можем и воспользоваться при желании виджетом. Давайте попробуем это сделать.
Используя виджет меню, нам необходимо передать массив параметров, ключевым из которых является элемент items, в нем перечислены пункты меню. Элемент items в свою очередь также является массивом, в котором каждый из пунктов меню представлен в виде массива с элементами label и url. Label – наименование пункта меню, url – ссылка. Итого, вызов виджета в шаблоне будет таким:
|
1 2 3 4 5 6 7 |
<?= \yii\widgets\Menu::widget([ 'items' => [ ['label' => 'Home', 'url' => ['site/index']], ['label' => 'About', 'url' => ['site/about']], ['label' => 'Contact', 'url' => ['site/contact']], ] ]); ?> |
Как видим, мы получили ту же самую верстку, виджет Menu позаботился о правильной генерации кода HTML. При этом Yii2 по умолчанию добавляет класс active активному пункту меню, мы видим, что он подсвечен. Если вдруг ваша верстка требует другой класс для активного пункта, тогда вы его можете указать параметром activeCssClass:
|
1 2 3 4 5 6 7 8 |
<?= \yii\widgets\Menu::widget([ 'items' => [ ['label' => 'Home', 'url' => ['site/index']], ['label' => 'About', 'url' => ['site/about']], ['label' => 'Contact', 'url' => ['site/contact']], ], 'activeCssClass'=>'active', ]); ?> |
Строка, переданная значением данному параметру, будет использована для указания класса активного пункта. Также фреймворк позволяет дополнительно устанавливать классы для первого и последнего пункта меню, используя опции firstItemCssClass и lastItemCssClass:
|
1 2 3 4 5 6 7 8 9 10 |
<?= \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', ]); ?> |
На этом, пожалуй, пока остановимся, и в следующей статье рассмотрим дополнительные возможности работы с виджетом меню. Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.
