Yii: Как задавать стили css (class, id) для CMenu, пунктов меню и ссылок в меню.

Yii: Как задавать стили css (class, id) для CMenu, пунктов меню и ссылок в меню. Стандартные средства для задания стилей css для CMenu, а также ссылок у пунктов меню.

Часто хочется задать свои стили css, своё оформление для меню CMenu. Это сводится к добавлению классов и идентификаторов id в html (виджет Cmenu формирует ненумерованный список <ul>, <li>). В Yii для этих целей предусмотрены htmlOptions, itemOptions, and linkOptions.

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 соответствующее оформление для них.

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (1)     Подпишитесь на RSS комментариев к этой статье.

1 комментарий

#1390
Николай говорит:
July 7, 2015 at 10:19 pm
Спасибо!