viter
(Chekhiv)
October 25, 2010, 12:16pm
1
Hello everyone!
Can anybody tell me how to style hyperlinks created with CMenu widget?
<?php $this->widget('zii.widgets.CMenu',array(
'items'=>array(
array('label'=>'Вхід', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
array('label'=>'Вихід ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest),
array('label'=>'Про сайт', 'url'=>array('/site/page', 'view'=>'about')),
array('label'=>'Контакт', 'url'=>array('/site/contact'))
),
)); ?>
I want to add class ‘menu’ to style my hyperlinks.
Thanks.
zaccaria
(Matteo Falsitta)
October 25, 2010, 12:33pm
2
You can use htmlOptions.
<?php $this->widget('zii.widgets.CMenu',array(
'items'=>array([ ... ] ),
'htmlOptions'=>array('class'=>'#menuClass')
); ?>
Now in the css you can style like:
#menuClass ul li
{
color: [...];
}
viter
(Chekhiv)
October 25, 2010, 12:38pm
3
But I need to use this css
a.menu:link {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}
a.menu:visited {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}
a.menu:hover {color:#F8F8F8; font-size: 12px; font-weight: bold; text-decoration: none}
a.menu:active {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}
So I need to style ‘a’ and not ‘ul’,‘li’.
viter:
But I need to use this css
a.menu:link {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}
a.menu:visited {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}
a.menu:hover {color:#F8F8F8; font-size: 12px; font-weight: bold; text-decoration: none}
a.menu:active {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}
So I need to style ‘a’ and not ‘ul’,‘li’.
Hi dude. You can use linkOptions and set the class of the anchor like this:
<?php $this->widget('zii.widgets.CMenu',array(
'id'=>'menuClass',
'items'=>array(
array('label'=>'Вхід', 'url'=>array('/site/login'), 'linkOptions'=>array('class'=>'menu'), 'visible'=>Yii::app()->user->isGuest),
array('label'=>'Вихід ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'linkOptions'=>array('class'=>'menu'), 'visible'=>!Yii::app()->user->isGuest),
array('label'=>'Про сайт', 'url'=>array('/site/page', 'view'=>'about'), 'linkOptions'=>array('class'=>'menu')),
array('label'=>'Контакт', 'url'=>array('/site/contact'), 'linkOptions'=>array('class'=>'menu'))
),
)); ?>
link to documentation
http://www.yiiframework.com/doc/api/1.1/CMenu#items-detail
But i think it is the worst implementation. You don’t need extra stuff in your code. You should try other approach.
What do you really nead? I think you can forget all above and just use CSS to control your links appearance like below.
#menuClass ul li a:link {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}
#menuClass ul li a:visited {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}
#menuClass ul li a:hover {color:#F8F8F8; font-size: 12px; font-weight: bold; text-decoration: none}
#menuClass ul li a:active {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}
Don’t forget to wrap your menu code inside a div with the correct id or just set the id property of CMenu.
http://www.yiiframework.com/doc/api/1.1/CMenu
By the way compact you CSS code. You don’t need repeat yourself.
CSS means Cascade Style Sheets so you can join the repeated attributes of elements.
#menuClass ul li a { font-size: 12px; font-weight: bold; text-decoration: none }
#menuClass ul li a:link, #menuClass ul li a:visited { color:#FFFFFF; }
#menuClass ul li a:hover, #menuClass ul li a:active { color:#F8F8F8; }
viter
(Chekhiv)
October 25, 2010, 1:22pm
6
Thank you, thiagovidal.
Your advices are great and really valuable.
viter
(Chekhiv)
December 14, 2010, 7:28pm
7
Is it possible to add any separator between menu items in CMenu?
I want my menu to look something like this
item1 | item2 | item3
Thanks