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

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

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

Итак, в предыдущих статьях мы с вами перенесли сверстанный шаблон в структуру фреймворка. Давайте на примере внедренного шаблона рассмотрим работу с виджетом меню, который предлагает нам фреймворк из коробки. Вот как выглядит меню в шаблоне сейчас:

Как видим, это стандартный список, при помощи которого и принято делать типовые меню. В нем есть активный пункт, для указания которого используется класс active. Также такой список удобен для реализации многоуровневого, выпадающего или вертикального меню. Для этого достаточно немного изменить верстку, добавив вложенные пункты для многоуровневого меню и изменить стили для получения необходимого формата меню.

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

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

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

На самом деле при реализации меню на сайте совсем не обязательно для этого использовать виджет. Мы вполне можем оставить имеющуюся верстку, изменив в ней ссылки и переименовав пункты. Но можем и воспользоваться при желании виджетом. Давайте попробуем это сделать.

Используя виджет меню, нам необходимо передать массив параметров, ключевым из которых является элемент items, в нем перечислены пункты меню. Элемент items в свою очередь также является массивом, в котором каждый из пунктов меню представлен в виде массива с элементами label и url. Label – наименование пункта меню, url – ссылка. Итого, вызов виджета в шаблоне будет таким:

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

Как видим, мы получили ту же самую верстку, виджет Menu позаботился о правильной генерации кода HTML. При этом Yii2 по умолчанию добавляет класс active активному пункту меню, мы видим, что он подсвечен. Если вдруг ваша верстка требует другой класс для активного пункта, тогда вы его можете указать параметром activeCssClass:

Строка, переданная значением данному параметру, будет использована для указания класса активного пункта. Также фреймворк позволяет дополнительно устанавливать классы для первого и последнего пункта меню, используя опции firstItemCssClass и lastItemCssClass:

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

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

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

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

Фреймворк Laravel. Быстрая разработка с фреймворком №1

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

Научиться

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree