Wiki: Yii 1: Как задавать стили css (class, id) для CMenu, пунктов меню и ссылок в меню
Часто хочется задать свои стили css, своё оформление для меню CMenu. Это сводится к добавлению классов и идентификаторов id в html (виджет Cmenu формирует ненумерованный список <ul>, <li>
. В Yii для этих целей предусмотрены htmlOptions, itemOptions, and linkOptions.
1. Добавление названий id и class к CMenu.
Используются id и htmlOptions для добавления своих идентификаторов и классов.
Это сформирует следующий html:
2. Добавление названий классов (class names) к пунктам CMenu (CMenu items) и ссылкам в пунктах меню (CMenu item links).
Используем itemOptions и linkOptions. Например:
Эти команды позволят Yii сгенерировать следующий кусочек меню:
Установив таким образом идентификаторы и классы в шаблоне html, далее расписывайте в файле стилей .css соответствующее оформление для них.

1. Добавление названий id и class к CMenu.
Используются id и htmlOptions для добавления своих идентификаторов и классов.
//in your view
$this->widget('zii.widgets.CMenu', array(
'id'=>'myMenu',
'items'=>$this->myMenu,
'htmlOptions'=>array('class'=>'span-24 last'),
'encodeLabel'=>false, // чтобы можно было в label использовать html-теги (жирность, наклон, цвет и т.д.)
));
Это сформирует следующий html:
<ul class="span-24 last" id="myMenu">
...
</ul>
2. Добавление названий классов (class names) к пунктам CMenu (CMenu items) и ссылкам в пунктах меню (CMenu item links).
Используем itemOptions и linkOptions. Например:
//in your controller
$this->myMenu = array(
'id'=>'myMenu',
'items'=>array(
array(
'label'=>'Home',
'url'=>array('site/index'),
'itemOptions'=>array('class'=>'visited'),
'linkOptions'=>array('class'=>'bar'),
),
array('label'=>'Sign Out', 'url'=>array('site/signout')),
),
);
Эти команды позволят Yii сгенерировать следующий кусочек меню:
...
<ul id="myMenu">
<li class="visited">
<a class="bar" href="/site/index">Home</a>
</li>
...
Установив таким образом идентификаторы и классы в шаблоне html, далее расписывайте в файле стилей .css соответствующее оформление для них.
Leave a Comment