Многостраничный сайт использует в Yii 2.x виджет Menu. Рассмотрим несколько примеров, начнем с самого простого, и от примера к примеру начнем добавлять различные свойства и атрибуты меню.
Изначально добавляем следующее пространство имен, необходимое для подключения нашего виджета
use yii\widgets\Menu;
echo Menu::widget([ 'items' => [ ['label' => 'Главная', 'url' => ['site/index']], ['label' => 'О компании', 'url' => ['site/about']], ['label' => 'Услуги', 'url' => ['site/services']], ['label' => 'Контакты', 'url' => ['site/contacts']], ], ]);
На выходе получаем следующий html код
<ul> <li> <a href="http://demo/web/site/index">Главная</a> </li> <li> <a href="http://demo/web/site/about">О компании</a> </li> <li> <a href="http://demo/web/site/services">Услуги</a> </li> <li> <a href="http://demo/web/site/contacts">Контакты</a> </li> </ul>
Добавим дополнительные css классы к первому, последнему и активному элементу меню
echo Menu::widget([ 'items' => [ ['label' => 'Главная', 'url' => ['site/index']], ['label' => 'О компании', 'url' => ['site/about']], ['label' => 'Услуги', 'url' => ['site/services']], ['label' => 'Контакты', 'url' => ['site/contacts']], ], 'activeCssClass'=>'active', 'firstItemCssClass'=>'fist', 'lastItemCssClass' =>'last', ]);
<ul> <li class="first"> <a href="http://demo/web/site/index">Главная</a> </li> <li class="active"> <a href="http://demo/web/site/about">О компании</a> </li> <li> <a href="http://demo/web/site/services">Услуги</a> </li> <li class="last"> <a href="http://demo/web/site/contacts">Контакты</a> </li> </ul>
Рассмотрим свойство "options", позволяющее добавить различные стили, идентификаторы или атрибуты к тегу ul
echo Menu::widget([ 'items' => [ ['label' => 'Главная', 'url' => ['site/index']], ['label' => 'О компании', 'url' => ['site/about']], ['label' => 'Услуги', 'url' => ['site/services']], ['label' => 'Контакты', 'url' => ['site/contacts']], ], 'options' => [ 'id'=>'navid', 'class' => 'navbar-nav', 'style'=>'float: left; font-size: 16px;', 'data'=>'menu', ], 'activeCssClass'=>'active', 'firstItemCssClass'=>'fist', 'lastItemCssClass' =>'last', ]);
На выходе получаем следующий html код:
<ul id="navid" class="navbar-nav" style="float: left; font-size: 16px;" data="menu" > <li class="first"> <a href="http://demo/web/site/index">Главная</a> </li> <li class="active"> <a href="http://demo/web/site/about">О компании</a> </li> <li> <a href="http://demo/web/site/services">Услуги</a> </li> <li class="last"> <a href="http://demo/web/site/contacts">Контакты</a> </li > </ul>
Добавим свой шаблон для ссылок
echo Menu::widget([ 'items' => [ ['label' => 'Главная', 'url' => ['site/index']], ['label' => 'О компании', 'url' => ['site/about']], ['label' => 'Услуги', 'url' => ['site/services']], ['label' => 'Контакты', 'url' => ['site/contacts']], ], 'options' => [ 'id'=>'navid', 'class' => 'navbar-nav', 'style'=>'float: left; font-size: 16px;', 'data'=>'menu', ], 'labelTemplate' =>'{label} Label', 'linkTemplate' => '<a href="{url}"><span>{label}</span></a>', 'activeCssClass'=>'active', 'firstItemCssClass'=>'fist', 'lastItemCssClass' =>'last', ]);
На выходе получаем
<ul id="navid" class="navbar-nav" style="float: left; font-size: 16px;" data="menu"> <li class="first"> <a href="http://demo/web/site/index"><span>Главная</span></a> </li> <li class="active"> <a href="http://demo/web/site/about"><span>О компании</span></a> </li> <li> <a href="http://demo/web/site/services"><span>Услуги</span></a> </li> <li class="last"> <a href="http://demo/web/site/contacts"><span>Контакты</span></a> </li > </ul>
Возможно непосредственно добавлять теги со стилями в раздел item, для этого переводим свойство 'encodeLabels' в 'false'
echo Menu::widget([ 'items' => [ ['label' => 'Главная', 'url' => ['site/index']], ['label' => 'О компании', 'url' => ['site/about']], ['label' => 'Услуги', 'url' => ['site/services']], ['label' => 'Контакты', 'url' => ['site/contacts']], ], 'options' => [ 'id'=>'navid', 'class' => 'navbar-nav', 'style'=>'float: left; font-size: 16px;', 'data'=>'menu', ], 'encodeLabels' =>'false', 'activeCssClass'=>'active', 'firstItemCssClass'=>'fist', 'lastItemCssClass' =>'last', ]);
Получаем следующий html код:
<ul id="navid" class="navbar-nav" style="float: left; font-size: 16px;" data="menu" > <li class="first"> <a href="http://demo/web/site/index"><span class="one" >Главная</span></a> </li> <li class="active"> <a href="http://demo/web/site/about"><span class="two" >О компании</span></a> </li> <li> <a href="http://demo/web/site/services"><span class="tree" >>Услуги</span></a> </li> <li class="last"> <a href="http://demo/web/site/contacts"><span class="four" >Контакты</span></a> </li> </ul>
Усложним программный код и добавим к элементу услуги вложенность.
echo Menu::widget([ 'items' => [ ['label' => 'Главная', 'url' => ['site/index']], ['label' => 'О компании', 'url' => ['site/about']], ['label' => 'Услуги', 'url' => ['services/index'], 'options'=>['class'=>'dropdown'], 'template' => '<a href="{url}" class="url-class">{label}</a>', 'items' => [ ['label' => 'Юридические услуги', 'url' => ['services/juridical-services']], ['label' => 'Оценочные услуги', 'url' => ['services/valuation-services']], ] ], ['label' => 'Контакты', 'url' => ['site/contacts']] ], 'submenuTemplate' => "\n<ul class='dropdown-menu' role='menu'>\n{items}\n</ul>\n", ]);
Исходный html код:
<ul> <li><a href="/web/index">Главная</a></li> <li><a href="/web/about">О компании</a></li> <li class="dropdown"><a href="/web/services/index" class="url-class">Услуги</a> <ul class='dropdown-menu' role='menu'> <li><a href="/web/services/juridical-services">Юридические услуги</a></li> <li><a href="/web/services/valuation-services">Оценочные услуги</a></li> </ul> </li> <li><a href="/web/site/contacts">Контакты</a></li> </ul>
Добавим дополнительный класс к каждому пункту меню:
echo Menu::widget([ 'items' => [ ['label' => 'Главная', 'url' => ['site/index']], ['label' => 'О компании', 'url' => ['site/about']], ['label' => 'Услуги', 'url' => ['services/index'], 'options'=>['class'=>'dropdown'], 'template' => '<a href="{url}" class="url-class">{label}</a>', 'items' => [ ['label' => 'Юридические услуги', 'url' => ['services/juridical-services']], ['label' => 'Оценочные услуги', 'url' => ['services/valuation-services']], ] ], ['label' => 'Контакты', 'url' => ['site/contacts']] ], 'itemOptions'=>['class'=>'myclass', 'style'=>'font-size = 12px;'], 'submenuTemplate' => "\n<ul class='dropdown-menu' role='menu'>\n{items}\n</ul>\n", ]);
Получаем следующий html код:
<ul> <li class = 'myclass' style = 'font-size = 12px;' ><a href="/web/index">Главная</a></li> <li class = 'myclass' style = 'font-size = 12px;'><a href="/web/about">О компании</a></li> <li class="dropdown"><a href="/web/services/index" class="url-class">Услуги</a> <ul class='dropdown-menu myclass' style = 'font-size = 12px;' role='menu'> <li class = 'myclass' style = 'font-size = 12px;'><a href="/web/services/juridical-services">Юридические услуги</a></li> <li class = 'myclass' style = 'font-size = 12px;'><a href="/web/services/valuation-services">Оценочные услуги</a></li> </ul> </li <li class = 'myclass' style = 'font-size = 12px;'><a href="/web/site/contacts">Контакты</a></li> </ul>
Итак мы рассмотрели основные примеры использования виджета Menu в Yii 2.x, надеюсь они будут для вас полезными.