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

17

Від автора: вітаю вас, друзі. Ми продовжуємо цикл статей, присвячених знайомству з фреймворком Yii2. У цій статті ми з вами розглянемо роботу з віджетом Menu фреймворку Yii2. Даний віджет дозволяє створювати і управляти меню в Yii2.

Отже, в попередніх статтях ми з вами перенесли зверстаний шаблон в структуру фреймворка. Давайте на прикладі вбудованого шаблону розглянемо роботу з віджетом меню, який пропонує нам фреймворк з коробки. Ось як виглядає меню в шаблоні зараз:

  • HOME
  • ABOUT
  • CONTACT

Як бачимо, це стандартний список, за допомогою якого і прийнято робити типові меню. У ньому є активний пункт, для визначення якого використовується клас active. Також такий список зручний для реалізації багаторівневого, що випадає або вертикального меню. Для цього досить трохи змінити верстку, додавши вкладені пункти для багаторівневого меню і змінити стилі для отримання необхідного формату меню.

Насправді при реалізації меню на сайті зовсім не обов’язково для цього використовувати віджет. Ми цілком можемо залишити наявну верстку, змінивши в ній посилання і перейменувавши пункти. Але можемо і скористатися при бажанні віджетом. Давайте спробуємо це зробити.

Використовуючи віджет меню, нам необхідно передати масив параметрів, ключовим з яких є елемент items, в ньому перераховані пункти меню. Елемент items в свою чергу також є масивом, в якому кожен з пунктів меню представлений у вигляді масиву з елементами label і url. Label – найменування пункту меню, url – посилання. Отже, виклик віджета у шаблоні буде таким:

[
[‘label’ => ‘Home’, ‘url’ => [‘site/index’]],
[‘label’ => ‘About’, ‘url’ => [‘site/about’]],
[‘label’ => ‘Contact’, ‘url’ => [‘site/contact’]],
]
]); ?>

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

Як бачимо, ми отримали ту ж саму верстку, віджет Menu подбав про правильної генерації коду HTML. При цьому Yii2 за замовчуванням додає клас active активного пункту меню, ми бачимо, що він підсвічується. Якщо раптом ваша верстка вимагає інший клас для активного пункту, тоді ви її можете вказати параметром activeCssClass:

[
[‘label’ => ‘Home’, ‘url’ => [‘site/index’]],
[‘label’ => ‘About’, ‘url’ => [‘site/about’]],
[‘label’ => ‘Contact’, ‘url’ => [‘site/contact’]],
],
‘activeCssClass’=>’active’,
]); ?>

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

[
[‘label’ => ‘Home’, ‘url’ => [‘site/index’]],
[‘label’ => ‘About’, ‘url’ => [‘site/about’]],
[‘label’ => ‘Contact’, ‘url’ => [‘site/contact’]],
],
‘activeCssClass’=>’active’,
‘firstItemCssClass’=>’fist-item’,
‘lastItemCssClass’ =>’last-item’,
]); ?>

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